Fix: added data values to icons and JS for tasks

Author: Alkaison

index.html

@@ -27,33 +27,33 @@ <h1 id="todoTitle">ToDo App</h1>
         <div class="task-container">
             <div class="task">
                 <!-- Pending Task -->
-                <i class="fa-regular fa-circle pendingSvg"></i>
+                <i class="fa-regular fa-circle pendingSvg" data="check"></i>
 
-                <span class="taskText">Follow @Alkaison on Twitter</span>
+                <span class="taskText" data="task">Follow @Alkaison on Twitter</span>
 
                 <!-- Edit ICON -->
-                <i class="fa-solid fa-pencil editSvg"></i>
+                <i class="fa-solid fa-pencil editSvg" data="edit"></i>
 
                 <!-- Delete ICON -->
-                <i class="fa-solid fa-trash deleteSvg"></i>
+                <i class="fa-solid fa-trash deleteSvg" data="delete"></i>
             </div>
 
             <div class="task">
-                <i class="fa-regular fa-circle pendingSvg"></i>
+                <i class="fa-regular fa-circle pendingSvg" data="check"></i>
 
-                <span class="taskText">Complete the first task</span>
+                <span class="taskText" data="task">Complete the first task</span>
 
-                <i class="fa-solid fa-pencil editSvg"></i>
-                <i class="fa-solid fa-trash deleteSvg"></i>
+                <i class="fa-solid fa-pencil editSvg" data="edit"></i>
+                <i class="fa-solid fa-trash deleteSvg" data="delete"></i>
             </div>
 
             <div class="task">
-                <i class="fa-regular fa-circle pendingSvg"></i>
+                <i class="fa-regular fa-circle pendingSvg" data="check"></i>
 
-                <span class="taskText">Thank you for visiting here</span>
+                <span class="taskText" data="task">Thank you for visiting here</span>
 
-                <i class="fa-solid fa-pencil editSvg"></i>
-                <i class="fa-solid fa-trash deleteSvg"></i>
+                <i class="fa-solid fa-pencil editSvg" data="edit"></i>
+                <i class="fa-solid fa-trash deleteSvg" data="delete"></i>
             </div>
         </div>
 

script.js

@@ -3,6 +3,21 @@ const taskAddBtn = document.querySelector("#addSvg");
 const taskContainer = document.querySelector(".task-container");
 const taskField = document.querySelector(".task");
 const clearAllTaskBtn = document.querySelector("#clearAllTaskBtn");
+const taskCompletedIcon = "fa-solid fa-circle-check pendingSvg";
+const taskUncompletedIcon = "fa-regular fa-circle pendingSvg";
+
+const completedTask = (task) => {
+
+    // if the task sign is uncheck then check it, visa-versa
+    task.className = task.className === taskUncompletedIcon ? taskCompletedIcon : taskUncompletedIcon;
+}
+
+const editTaskText = (task) => {
+    
+    // make the task text editable 
+    const editTaskText = taskElement.querySelector(".taskText"); 
+    editTaskText.setAttribute("contenteditable", "true");
+}
 
 // add the task when click 
 taskAddBtn.addEventListener("click", () => {
@@ -27,6 +42,33 @@ taskAddBtn.addEventListener("click", () => {
 
 });
 
+// check which task is clicked and which button is clicked 
+taskContainer.addEventListener("click", (e) => {
+    // select the particular task 
+    const taskElement = e.target.parentElement;
+
+    if(taskElement.classList.contains("task"))
+    {
+        // get the data value of clicked element 
+        const clickedElement = e.target;
+        const data = clickedElement.getAttribute("data");;
+
+        switch(data)
+        {
+            case 'check':
+                completedTask(clickedElement);
+                break;
+            case 'task':
+                break;
+            case 'edit':
+                editTaskText(clickedElement);
+                break;
+            case 'delete':
+                break;
+        }
+    }
+});
+
 // remove all childs of "taskContainer" class 
 clearAllTaskBtn.addEventListener("click", () => {