Updating task modal v0.0.18

assets/js/user.js

@@ -93,9 +93,6 @@ const loadUserTasks = () => {
     }
 
     for (let i = 0; i < tasks.length; i++) {
-      const taskItemDiv = document.createElement('div');
-      taskItemDiv.className = 'task-item';
-
       createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], i);
     }
 
@@ -108,6 +105,30 @@ const loadUserTasks = () => {
         updateTaskPromise.then((res => {
           setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
         }));
+      });
+    }
+
+    const userTasks = document.querySelectorAll('.user-task');
+    for (let j = 0; j < userTasks.length; j++) {
+      userTasks[j].addEventListener("click", function() {
+        const taskTitle = tasks[j]['title'];
+        const taskDescription = tasks[j]['description'];
+        const taskCompletedStatus = tasks[j]['is_completed'];
+        const taskModal = document.querySelector('.task-modal');
+        const taskModalTitle = document.querySelector('.task-modal-title');
+        const taskModalDescription = document.querySelector('.task-modal-description');
+        const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status');
+        const closeTaskModal = document.querySelector('.close-edit-task-modal');
+        taskModalTitle.innerHTML = taskTitle;
+        taskModalDescription.placeholder = taskDescription;
+        taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no";
+        taskModal.classList.add('visible');
+
+        closeTaskModal.addEventListener("click", function() {
+          taskModal.classList.remove('visible');
+        });
+
+
       })
     }
   }));
@@ -136,7 +157,7 @@ const createTaskItem = (title, isCompleted, index) => {
 
   const taskLabel = document.createElement('li');
   taskLabel.innerHTML = title;
-  taskLabel.className = `task-${index}`;
+  taskLabel.className = `task-${index} user-task`;
 
 
   taskItemDiv.appendChild(taskCheckbox);

assets/pages/user.html

@@ -107,16 +107,17 @@
       <div class="main-modal">
         <div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div>
         <div class="modal-header">
-          <h2>Finish API</h2>
+          <h2 class="task-modal-title">Finish API</h2>
           <p>View task details</p>
         </div>
         <div class="modal-content">
           <label for="modal-description-input">Description</label>
-          <input id="modal-description-input" class="modal-description-input" placeholder="Finish the task API" />
+          <input id="modal-description-input" class="modal-description-input task-modal-description" placeholder="Finish the task API" />
           <label for="modal-completed-status">Is it completed?</label>
-          <p id="modal-completed-status" class="modal-completed-status"></p>
+          <p id="modal-completed-status" class="task-modal-completed-status"></p>
         </div>
         
+        <button class="delete-task-btn">Delete Task</button>
         <button class="submit-task-btn">Save Changes</button>
       </div>
     </section>