West Midlands | 26-Jan-ITP | Fida Ali Zada | Sprint 3 | To-Do List App

Sprint-3/todo-list/index.html

@@ -15,6 +15,7 @@ <h1>My ToDo List</h1>
 
     <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>
 
@@ -28,13 +29,16 @@ <h1>My ToDo List</h1>
     <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>
 
+    <button class="delete-completed-btn">Delete completed tasks</button>
+
   </div>
 </body>
 </html>

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",

Sprint-3/todo-list/script.mjs

@@ -20,13 +20,17 @@ 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 = "";
 }
 
 // Note:
@@ -62,6 +66,16 @@ function createListItem(todo, index) {
     li.classList.add("completed");
   }
 
+  const deadlineEl = li.querySelector(".deadline");
+
+  if (todo.deadline) {
+    const date = new Date(todo.deadline);
+    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    deadlineEl.textContent = ` (Due: ${formattedDate})`;
+  } else {
+    deadlineEl.textContent = "";
+  }
+
   li.querySelector('.complete-btn').addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
     render();
@@ -73,4 +87,10 @@ function createListItem(todo, index) {
   });
 
   return li;
-}
+}
+
+// "Delete Completed Tasks" button
+document.querySelector(".delete-completed-btn").addEventListener("click", () => {
+  Todos.deleteCompletedTasks(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,12 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
+}
+
+export function deleteCompletedTasks(todos) {
+  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,36 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompletedTasks()", () => {
+
+  test("Expect all completed tasks to be deleted", () => {
+    const todos = createMockTodos();
+    Todos.deleteCompletedTasks(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("Expect no change if there are no completed tasks", () => {
+    const todos = [
+      { task: "", completed: false },
+      { task: "Task 2 description", completed: false },
+    ];
+    const todosBeforeDeletion = [
+      { task: "Task 1 description", completed: false },
+      { task: "Task 2 description", completed: false },
+    ];
+    Todos.deleteCompletedTasks(todos);
+    expect(todos).toEqual(todosBeforeDeletion);
+  });
+
+  test("Expect all tasks to be deleted if all tasks are completed", () => {
+    const todos = [
+      { task: "Task 1 description", completed: true },
+      { task: "Task 2 description", completed: true },
+    ];
+    Todos.deleteCompletedTasks(todos);
+    expect(todos).toHaveLength(0);
+  });
+});
+