CodeYourFuture · Baba05206 · Nov 6, 2025 · Nov 7, 2025 · Nov 18, 2025 · Nov 29, 2025
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>ToDo List</title>
-  <link rel="stylesheet" href="style.css" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ToDo List</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+    />
 
-  <script type="module" src="script.mjs"></script>
-</head>
-<body>
-  <div class="todo-container">
-    <h1>My ToDo List</h1>
+    <script type="module" src="script.mjs"></script>
+  </head>
+  <body>
+    <div class="todo-container">
+      <h1>My ToDo List</h1>
 
-    <div class="todo-input">
-      <input type="text" id="new-task-input" placeholder="Enter a new task..." />
-      <button id="add-task-btn">Add</button>
-    </div>
+      <div class="todo-input">
+        <input
+          type="text"
+          id="new-task-input"
+          placeholder="Enter a new task..."
+        />
+        <button id="add-task-btn">Add</button>
+      </div>
+
+      <ul id="todo-list" class="todo-list"></ul>
 
-    <ul id="todo-list" class="todo-list">      
-    </ul>
+      <!-- Button to delete all completed tasks -->
+      <div class="todo-actions">
+        <button id="delete-completed-btn" class="delete-completed-btn">
+          Delete completed tasks
+        </button>
+      </div>
 
-    <!-- 
+      <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.
     -->
-    <template id="todo-item-template">
-      <li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
-        <span class="description">Task description</span>
-        <div class="actions">
-          <button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
-          <button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>
-        </div>
-      </li>
-    </template>
-
-  </div>
-</body>
+      <template id="todo-item-template">
+        <li class="todo-item">
+          <!-- include class "completed" if the task completed state is true -->
+          <span class="description">Task description</span>
+          <div class="actions">
+            <button class="complete-btn">
+              <span class="fa-solid fa-check" aria-hidden="true"></span>
+            </button>
+            <button class="delete-btn">
+              <span class="fa-solid fa-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </li>
+      </template>
+    </div>
+  </body>
 </html>
diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "serve": "http-server",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest"
   },
   "repository": {
     "type": "git",
@@ -17,7 +17,8 @@
   },
   "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
   "devDependencies": {
+    "cross-env": "^10.1.0",
     "http-server": "^14.1.1",
-    "jest": "^30.0.4"
+    "jest": "^30.2.0"
   }
 }
diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs
@@ -1,4 +1,4 @@
-// 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
@@ -7,16 +7,18 @@ const todos = [];
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
+  document
+    .getElementById("delete-completed-btn")
+    .addEventListener("click", deleteCompletedTodos);
 
   // 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");
@@ -29,6 +31,12 @@ function addNewTodo() {
   taskInput.value = "";
 }
 
+// A callback that deletes all completed tasks
+function deleteCompletedTodos() {
+  Todos.deleteCompleted(todos);
+  render();
+}
+
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
 //   to avoid querying the DOM repeatedly inside render().
@@ -45,12 +53,11 @@ 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.
 // - 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 +69,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;
-}
+}
diff --git a/Sprint-3/todo-list/style.css b/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,23 @@ h1 {
   text-decoration: line-through;
   color: gray;
 }
+
+/* Styling for delete completed button */
+.todo-actions {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.delete-completed-btn {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.delete-completed-btn:hover {
+  background-color: #da190b;
+}
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
@@ -26,4 +26,15 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+
+// Delete all completed tasks from the todos list
+export function deleteCompleted(todos) {
+  // Filter out all completed tasks, keeping only incomplete ones
+  // We iterate backwards to avoid index shifting issues
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      todos.splice(i, 1);
+    }
+  }
+}
diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs
@@ -13,7 +13,7 @@ function createMockTodos() {
     { 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 4 description", completed: false },
   ];
 }
 
@@ -29,7 +29,6 @@ describe("addTask()", () => {
   });
 
   test("Should append a new task to the end of a ToDo list", () => {
-
     const todos = createMockTodos();
     const lengthBeforeAddition = todos.length;
     Todos.addTask(todos, theTask.task, theTask.completed);
@@ -42,7 +41,6 @@ describe("addTask()", () => {
 });
 
 describe("deleteTask()", () => {
-
   test("Delete the first task", () => {
     const todos = createMockTodos();
     const todosBeforeDeletion = createMockTodos();
@@ -53,7 +51,7 @@ describe("deleteTask()", () => {
 
     expect(todos[0]).toEqual(todosBeforeDeletion[1]);
     expect(todos[1]).toEqual(todosBeforeDeletion[2]);
-    expect(todos[2]).toEqual(todosBeforeDeletion[3]);        
+    expect(todos[2]).toEqual(todosBeforeDeletion[3]);
   });
 
   test("Delete the second task (a middle task)", () => {
@@ -66,7 +64,7 @@ describe("deleteTask()", () => {
 
     expect(todos[0]).toEqual(todosBeforeDeletion[0]);
     expect(todos[1]).toEqual(todosBeforeDeletion[2]);
-    expect(todos[2]).toEqual(todosBeforeDeletion[3]);        
+    expect(todos[2]).toEqual(todosBeforeDeletion[3]);
   });
 
   test("Delete the last task", () => {
@@ -79,7 +77,7 @@ describe("deleteTask()", () => {
 
     expect(todos[0]).toEqual(todosBeforeDeletion[0]);
     expect(todos[1]).toEqual(todosBeforeDeletion[1]);
-    expect(todos[2]).toEqual(todosBeforeDeletion[2]);        
+    expect(todos[2]).toEqual(todosBeforeDeletion[2]);
   });
 
   test("Delete a non-existing task", () => {
@@ -94,7 +92,6 @@ describe("deleteTask()", () => {
 });
 
 describe("toggleCompletedOnTask()", () => {
-
   test("Expect the 'completed' property to toggle on an existing task", () => {
     const todos = createMockTodos();
     const taskIndex = 1;
@@ -111,13 +108,12 @@ describe("toggleCompletedOnTask()", () => {
     const todos = createMockTodos();
     const todosBeforeToggle = createMockTodos();
     Todos.toggleCompletedOnTask(todos, 1);
-    
-    expect(todos[0]).toEqual(todosBeforeToggle[0]);    
+
+    expect(todos[0]).toEqual(todosBeforeToggle[0]);
     expect(todos[2]).toEqual(todosBeforeToggle[2]);
     expect(todos[3]).toEqual(todosBeforeToggle[3]);
   });
 
-
   test("Expect no change when toggling on a non-existing task", () => {
     const todos = createMockTodos();
     const todosBeforeToggle = createMockTodos();
@@ -130,3 +126,78 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("Delete all completed tasks from a mixed list", () => {
+    const todos = createMockTodos();
+    // Mock list has 2 completed tasks (Task 1 and Task 3)
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(2);
+    expect(todos[0]).toEqual({ task: "Task 2 description", completed: false });
+    expect(todos[1]).toEqual({ task: "Task 4 description", completed: false });
+  });
+
+  test("Delete completed tasks from a list with no completed tasks", () => {
+    const todos = [
+      { task: "Task 1", completed: false },
+      { task: "Task 2", completed: false },
+    ];
+    const todosBeforeDeletion = [...todos];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toEqual(todosBeforeDeletion);
+    expect(todos).toHaveLength(2);
+  });
+
+  test("Delete completed tasks from a list where all tasks are completed", () => {
+    const todos = [
+      { task: "Task 1", completed: true },
+      { task: "Task 2", completed: true },
+      { task: "Task 3", completed: true },
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(0);
+  });
+
+  test("Delete completed tasks from an empty list", () => {
+    const todos = [];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(0);
+  });
+
+  test("Delete completed tasks from a mixed list where the last item is completed", () => {
+    const todos = [
+      { task: "Task 1", completed: false },
+      { task: "Task 2", completed: true },
+      { task: "Task 3", completed: false },
+      { task: "Task 4", completed: true },
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(2);
+    expect(todos[0]).toEqual({ task: "Task 1", completed: false });
+    expect(todos[1]).toEqual({ task: "Task 3", completed: false });
+  });
+
+  test("Delete completed tasks from a mixed list with consecutive completed tasks", () => {
+    const todos = [
+      { task: "Task 1", completed: false },
+      { task: "Task 2", completed: true },
+      { task: "Task 3", completed: true },
+      { task: "Task 4", completed: true },
+      { task: "Task 5", completed: false },
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(2);
+    expect(todos[0]).toEqual({ task: "Task 1", completed: false });
+    expect(todos[1]).toEqual({ task: "Task 5", completed: false });
+  });
+});