Merge pull request #38 from cse110-sp24-group25/delete-branch

Add delete functionality
cse110-sp24-group25 · Apr 25, 2024 · 98bc5bd · 98bc5bd
2 parents 77f8598 + 1f2e775
commit 98bc5bd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/task-list/index.html b/task-list/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="styles/index.css">
   </head>
   <body>
+    <div class="main-body">
     <main>
       <h1 class="title">Tasks</h1>
       <div class="insert-task-manually">
@@ -24,4 +25,6 @@ <h1 class="title">Tasks</h1>
     </main>
   </body>
   <script src="scripts/index.js"></script>
+  <button>Delete Selected Task</button>
+</div>
 </html>
diff --git a/task-list/scripts/index.js b/task-list/scripts/index.js
@@ -25,11 +25,11 @@ function addJSONData() {
         taskList.appendChild(newTask);
         newTask.insertAdjacentHTML("afterbegin",
           `
-          <input type="checkbox" id="toggle-btn">
+          <input type="checkbox" id="toggle-btn" onclick="updateCompleted(this)">
           <label for="toggle-btn">Mark as Complete</label>
           <p>${task.name}</p>
           <p>Due: ${task.deadline}</p>
-          <button type="delete">Delete</button>
+          <button type="delete" onclick="deleteCompleted()">Delete</button>
           `
         );
       }
@@ -42,6 +42,27 @@ function addJSONData() {
 
 addJSONData();
 
+/**
+ * Deletes all tasks that are marked as completed from the task list
+ */
+function deleteCompleted() {
+  const taskList = document.querySelector(".task-list-flex");
+  let completedTask = document.querySelector(".completed");
+  while (completedTask !== null){
+    taskList.removeChild(completedTask);
+    completedTask = document.querySelector(".completed");
+  }
+}
+
+/**
+ * Toggles the "completed" class of the parent task of the checkbox
+ * @param checkbox
+ */
+function updateCompleted(checkbox) {
+  checkbox.parentElement.classList.toggle("completed");
+}
+
+
 // html has two boxes, one for deadline, and one for task?
 /**
  * 
@@ -59,13 +80,14 @@ function addTask() {
   const newTask = document.createElement("div");
 
   newTask.setAttribute("class","task");
+  newTask.classList.add("completed");
   taskList.appendChild(newTask);
   newTask.insertAdjacentHTML("beforeend",
-    `<input type="checkbox" id="toggle-btn">
+    `<input type="checkbox" id="toggle-btn" onclick="updateCompleted(this)">
     <label for="toggle-btn">Mark as Complete</label>
     <p>${taskName.value}</p>
     <p>Due: ${taskDeadline.value}</p>
-    <button type="delete">Delete</button>`
+    <button type="delete" onclick="deleteCompleted">Delete</button>`
   );
 
   taskName.value = "";