London | 26-ITP-Jan | Angela McLeary | Sprint 3 | Todo list app

Sprint-3/todo-list/index.html

@@ -20,7 +20,8 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
-
+    <!-- i added this -->
+    <button id="delete-completed-btn" class="delete-completed-btn"><span class="fa-solid fa-trash-arrow-up" aria-hidden="true"></span> Delete Completed Tasks</button>
     <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.

Sprint-3/todo-list/script.mjs

@@ -1,22 +1,41 @@
-// Store everything imported from './todos.mjs' module as properties of an object named Todos 
+// Store everything imported from './todos.mjs' module as properties of an object named Todos
+
 import * as Todos from "./todos.mjs";
 
 // To store the todo tasks
 const todos = [];
 
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
+  //get the deleted complete button from html
+  const massDeleteBtn = document.querySelector("#delete-completed-btn");
+
+  // check if the button is even found in the HTML
+  // console.log("Button found:", massDeleteBtn);
+
+  if (massDeleteBtn) {
+    massDeleteBtn.addEventListener("click", () => {
+      // check if the click event is firing
+      // console.log("Mass delete button clicked!");
+      // console.log("Todos before delete:", JSON.parse(JSON.stringify(todos)));
+      Todos.deleteCompleted(todos);
+      // check if the array actually changed
+      // console.log("Todos after delete:", JSON.parse(JSON.stringify(todos)));
+      render();
+    });
+  }
+
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
   // Populate sample data
-  Todos.addTask(todos, "Wash the dishes", false); 
+  Todos.addTask(todos, "Wash the dishes", false);
   Todos.addTask(todos, "Do the shopping", true);
 
   render();
 });
 
 
-// A callback that reads the task description from an input field and 
+// A callback that reads the task description from an input field and
 // append a new task to the todo list.
 function addNewTodo() {
   const taskInput = document.getElementById("new-task-input");
@@ -31,7 +50,7 @@ function addNewTodo() {
 
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
-//   to avoid querying the DOM repeatedly inside render().
+// to avoid querying the DOM repeatedly inside render().
 // - This variable is declared here to be close to the only function that uses it.
 const todoListEl = document.getElementById("todo-list");
 
@@ -48,9 +67,9 @@ function render() {
 
 // Note:
 // - First child of #todo-item-template is a <li> element.
-//   We will create each ToDo list item as a clone of this node.
+// We will create each ToDo list item as a clone of this node.
 // - This variable is declared here to be close to the only function that uses it.
-const todoListItemTemplate = 
+const todoListItemTemplate =
   document.getElementById("todo-item-template").content.firstElementChild;
 
 // Create a <li> element for the given todo task
@@ -62,15 +81,15 @@ function createListItem(todo, index) {
     li.classList.add("completed");
   }
 
-  li.querySelector('.complete-btn').addEventListener("click", () => {
+  li.querySelector(".complete-btn").addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
     render();
   });
-    
-  li.querySelector('.delete-btn').addEventListener("click", () => {
+
+  li.querySelector(".delete-btn").addEventListener("click", () => {
     Todos.deleteTask(todos, index);
     render();
   });
 
   return li;
-}
+}

Sprint-3/todo-list/style.css

@@ -41,7 +41,7 @@ h1 {
 .todo-input button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   border: none;
   border-radius: 6px;
@@ -105,3 +105,20 @@ h1 {
   text-decoration: line-through;
   color: gray;
 }
+
+#delete-completed-btn {
+  width: 100%;
+  margin-top: 15px;
+  padding: 10px;
+  background-color: gray;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#delete-completed-btn:hover {
+  background-color: #e74c3c;
+}

Sprint-3/todo-list/todos.mjs

@@ -26,4 +26,14 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+
+// Removes all completed ToDos from the given list
+export function deleteCompleted(todos) {
+  // Loop backwards so removing items doesn't shift indexes and skip elements
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      todos.splice(i, 1);
+    }
+  }
+}

Sprint-3/todo-list/todos.test.mjs

@@ -130,3 +130,21 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("should remove all completed tasks and keep only active ones", () => {
+    // 1. Setup a list with mixed states
+    const todos = [
+      { task: "Task A", completed: true },
+      { task: "Task B", completed: false },
+      { task: "Task C", completed: true }
+    ];
+
+    // 2. Execute the function
+    Todos.deleteCompleted(todos);
+
+    // 3. Verify: only Task B should remain
+    expect(todos).toHaveLength(1);
+    expect(todos[0].task).toBe("Task B");
+    expect(todos[0].completed).toBe(false);
+  });
+});