From 461f21d5efdf116ce1299fd1177aee2150968efb Mon Sep 17 00:00:00 2001
From: TropiiDev <colinbassett28@proton.me>
Date: Mon, 28 Apr 2025 18:44:39 -0400
Subject: [PATCH] Updating task modal v0.0.18

---
 assets/js/user.js      | 29 +++++++++++++++++++++++++----
 assets/pages/user.html |  9 +++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/assets/js/user.js b/assets/js/user.js
index d4ad5e6..37f67c6 100644
--- a/assets/js/user.js
+++ b/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);
diff --git a/assets/pages/user.html b/assets/pages/user.html
index 29e8f60..ea9f549 100644
--- a/assets/pages/user.html
+++ b/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>