From 2b1b28b8caed97c74ea5fbd48e436bb2f59b3e3e Mon Sep 17 00:00:00 2001
From: Asanda <asandagwala@gmail.com>
Date: Wed, 16 Sep 2026 11:33:46 +0200
Subject: [PATCH 1/2] Add mass delete for completed todos

---
 Sprint-3/todo-list/index.html     |  3 +++
 Sprint-3/todo-list/package.json   |  6 +++---
 Sprint-3/todo-list/script.mjs     |  5 +++++
 Sprint-3/todo-list/todos.mjs      |  9 +++++++++
 Sprint-3/todo-list/todos.test.mjs | 18 ++++++++++++++++++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index 4d12c4654..b31069d8f 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -16,8 +16,11 @@ <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>
 
+    <button id = "delete-completed-btn">Delete completed tasks</button>
+
     <ul id="todo-list" class="todo-list">      
     </ul>
 
diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json
index ce181158a..2262f3d00 100644
--- a/Sprint-3/todo-list/package.json
+++ b/Sprint-3/todo-list/package.json
@@ -5,8 +5,8 @@
   "description": "You must update this package",
   "type": "module",
   "scripts": {
-    "serve": "http-server",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "serve": "http-server",    
+    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest"
   },
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
   "devDependencies": {
-    "http-server": "^14.1.1",
+    "http-server": "^14.1.1",    
     "jest": "^30.0.4"
   }
 }
diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs
index ba0b2ceae..cf400e7f4 100644
--- a/Sprint-3/todo-list/script.mjs
+++ b/Sprint-3/todo-list/script.mjs
@@ -7,6 +7,7 @@ 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); 
@@ -28,6 +29,10 @@ function addNewTodo() {
 
   taskInput.value = "";
 }
+function deleteCompletedTodos() {
+  Todos.deleteCompleted(todos);
+  render();
+}
 
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index f17ab6a25..acc03678d 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/Sprint-3/todo-list/todos.mjs
@@ -26,4 +26,13 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
+}
+
+// Delete all completed tasks
+export function deleteCompleted(todos) {
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      todos.splice(i, 1);
+    }
+  }
 }
\ No newline at end of file
diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs
index bae7ae491..7ef99e7de 100644
--- a/Sprint-3/todo-list/todos.test.mjs
+++ b/Sprint-3/todo-list/todos.test.mjs
@@ -130,3 +130,21 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("Delete all completed tasks", () => {
+    const todos = createMockTodos();
+
+    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,
+    });
+  });
+});
+

From e8b253ac10d16dc5bff83497abe0c9459a885de1 Mon Sep 17 00:00:00 2001
From: Asanda <asandagwala@gmail.com>
Date: Wed, 16 Sep 2026 12:13:43 +0200
Subject: [PATCH 2/2] Add mass delete for completed todos

---
 Sprint-3/todo-list/index.html     | 77 ++++++++++++++++++-------------
 Sprint-3/todo-list/script.mjs     | 16 +++++--
 Sprint-3/todo-list/todos.mjs      |  4 +-
 Sprint-3/todo-list/todos.test.mjs | 12 +++--
 4 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index b31069d8f..120019f1f 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -1,43 +1,54 @@
-<!DOCTYPE html>
+<!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..."
+        />
+        <input type="date" id="deadline-input" />
+        <button id="add-task-btn">Add</button>
+      </div>
 
-    <button id = "delete-completed-btn">Delete completed tasks</button>
+      <button id="delete-completed-btn">Delete completed tasks</button>
 
-    <ul id="todo-list" class="todo-list">      
-    </ul>
+      <ul id="todo-list" class="todo-list"></ul>
 
-    <!-- 
+      <!-- 
       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>
+          <span class = "deadline"></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/script.mjs b/Sprint-3/todo-list/script.mjs
index cf400e7f4..56d28e892 100644
--- a/Sprint-3/todo-list/script.mjs
+++ b/Sprint-3/todo-list/script.mjs
@@ -21,14 +21,20 @@ window.addEventListener("load", () => {
 // append a new task to the todo list.
 function addNewTodo() {
   const taskInput = document.getElementById("new-task-input");
+  const deadlineInput = document.getElementById("deadline-input");
+
   const task = taskInput.value.trim();
+  const deadline = deadlineInput.value || null;
+  
   if (task) {
-    Todos.addTask(todos, task, false);
+    Todos.addTask(todos, task, false, deadline);
     render();
   }
 
   taskInput.value = "";
+  deadlineInput.value = "";
 }
+
 function deleteCompletedTodos() {
   Todos.deleteCompleted(todos);
   render();
@@ -63,9 +69,13 @@ function createListItem(todo, index) {
   const li = todoListItemTemplate.cloneNode(true); // true => Do a deep copy of the node
 
   li.querySelector(".description").textContent = todo.task;
-  if (todo.completed) {
-    li.classList.add("completed");
+
+  if (todo.deadline){
+    li.querySelector(".deadline").textContent = `Deadline: ${todo.deadline}`;
   }
+    if (todo.completed) {
+      li.classList.add("completed");
+    }
 
   li.querySelector('.complete-btn').addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index acc03678d..f2430b316 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/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
diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs
index 7ef99e7de..c95d223d0 100644
--- a/Sprint-3/todo-list/todos.test.mjs
+++ b/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: null },
+    { task: "Task 2 description", completed: false, deadline:null},
+    { task: "Task 3 description", completed: true, deadline: null },
+    { 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", () => {
@@ -140,10 +140,12 @@ describe("deleteCompleted()", () => {
     expect(todos[0]).toEqual({
       task: "Task 2 description",
       completed: false,
+      deadline: null
     });
     expect(todos[1]).toEqual({
       task: "Task 4 description",
       completed: false,
+      deadline: null
     });
   });
 });