London | 26-ITP-Jan | Carlos Abreu |Sprint 3 | Todo List

Sprint-3/todo-list/index.html

@@ -20,6 +20,7 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
+    <button id="delete-completed-btn">Delete completed tasks</button>
 
     <!-- 
       This is a template for the To-do list item. 

Sprint-3/todo-list/script.mjs

@@ -8,10 +8,16 @@ const todos = [];
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
+document
+  .getElementById("delete-completed-btn")
+  .addEventListener("click", deleteCompletedTasks);
+
   // Populate sample data
   Todos.addTask(todos, "Wash the dishes", false); 
   Todos.addTask(todos, "Do the shopping", true);
 
+  Todos.addTask(todos, "Finish assignment", false, "2026-04-01");
+
   render();
 });
 
@@ -73,4 +79,9 @@ function createListItem(todo, index) {
   });
 
   return li;
-}
+}
+
+function deleteCompletedTasks() {
+  Todos.deleteCompleted(todos);
+  render();
+}

Sprint-3/todo-list/todos.mjs

@@ -10,8 +10,8 @@
 */
 
 // Append a new task to todos[]
-export function addTask(todos, task, completed = false) {
-  todos.push({ task, completed });
+export function addTask(todos, task, completed = false, deadline = null) {
+  todos.push({ task, completed, deadline });
 }
 
 // Delete todos[taskIndex] if it exists
@@ -26,4 +26,14 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+
+// Remove all completed tasks from the todos array
+export function deleteCompleted(todos) {
+  // Iterate backwards to safely remove items while mutating array
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      todos.splice(i, 1);
+    }
+  }
+}

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

@@ -10,15 +10,15 @@ import * as Todos from "./todos.mjs";
 // Return a mock ToDo List data with exactly 4 elements.
 function createMockTodos() {
   return [
-    { task: "Task 1 description", completed: true },
-    { task: "Task 2 description", completed: false },
-    { task: "Task 3 description", completed: true },
-    { task: "Task 4 description", completed: false },        
+    { task: "Task 1 description", completed: true, deadline: "2026-04-01" },
+    { task: "Task 2 description", completed: false, deadline: null },
+    { task: "Task 3 description", completed: true, deadline: "2026-04-05" },
+    { task: "Task 4 description", completed: false, deadline: null },
   ];
 }
 
 // A mock task to simulate user input
-const theTask = { task: "The Task", completed: false };
+const theTask = { task: "The Task", completed: false, deadline: null };
 
 describe("addTask()", () => {
   test("Add a task to an empty ToDo list", () => {
@@ -130,3 +130,44 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+
+  test("Remove all completed tasks", () => {
+    const todos = createMockTodos();
+
+    Todos.deleteCompleted(todos);
+
+    // Only incomplete tasks should remain
+    expect(todos).toHaveLength(2);
+    expect(todos[0].completed).toBe(false);
+    expect(todos[1].completed).toBe(false);
+
+    expect(todos[0].task).toBe("Task 2 description");
+    expect(todos[1].task).toBe("Task 4 description");
+  });
+
+  test("No change if no tasks are completed", () => {
+    const todos = [
+      { task: "Task A", completed: false },
+      { task: "Task B", completed: false }
+    ];
+
+    const before = JSON.parse(JSON.stringify(todos));
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toEqual(before);
+  });
+
+  test("All tasks removed if all are completed", () => {
+    const todos = [
+      { task: "Task A", completed: true },
+      { task: "Task B", completed: true }
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(0);
+  });
+
+});