Brussels | ITP-2026-1 | Nik | Week 9 | Sprint 3 - Todo List

Sprint-3/todo-list/index.html

@@ -21,6 +21,8 @@ <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. 
       It can simplify the creation of list item node in JS script.

Sprint-3/todo-list/script.mjs

@@ -6,6 +6,7 @@ const todos = [];
 
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
+  document.getElementById("delete-completed-btn").addEventListener("click", deleteCompletedTasks);
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
   // Populate sample data
@@ -73,4 +74,9 @@ function createListItem(todo, index) {
   });
 
   return li;
+}
+
+function deleteCompletedTasks() {
+  Todos.deleteCompleted(todos);
+  render();
 }

Sprint-3/todo-list/todos.mjs

@@ -26,4 +26,9 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
+}
+
+export function deleteCompleted(todos) {
+  const remaining = todos.filter(todo => !todo.completed);
+  todos.splice(0, todos.length, ...remaining);
 }

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

@@ -130,3 +130,30 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("Delete all completed tasks", () => {
+    const todos = createMockTodos();
+    Todos.deleteCompleted(todos);
+    expect(todos).toHaveLength(2);
+    expect(todos[0].task).toEqual("Task 2 description");
+    expect(todos[1].task).toEqual("Task 4 description");
+  });
+
+  test("Does nothing when no task are completed", () => {
+    const todos = [
+      {task: "A", completed: false},
+      {task: "B", completed: false},
+    ];
+    Todos.deleteCompleted(todos);
+    expect(todos).toHaveLength(2);
+  });
+
+  test("Empties the list when all tasks are completed", () => {
+    const todos = [
+      {task: "A", completed: true},
+      {task: "B", completed: true},
+    ];
+    Todos.deleteCompleted(todos);
+    expect(todos).toHaveLength(0);
+  });
+});