Birmingham | 26-ITP-May | Tobias Amaechina | Sprint 3 | Sprint-3/todo-list

Sprint-3/todo-list/index.html

@@ -14,12 +14,16 @@
     <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>
+  <input type="text" id="new-task-input" placeholder="Enter a new task..." />
+  <input type="date" id="new-task-deadline" />
+  <button id="add-task-btn">Add</button>
+   </div>
+
 
     <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. 
@@ -28,7 +32,8 @@ <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>
-        <div class="actions">
+       <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>

Sprint-3/todo-list/package.json

@@ -18,6 +18,6 @@
   "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
   "devDependencies": {
     "http-server": "^14.1.1",
-    "jest": "^30.0.4"
+    "jest": "^30.4.2"
   }
 }

Sprint-3/todo-list/script.mjs

@@ -7,10 +7,14 @@ 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, "Do the shopping", true);
+  Todos.addTask(todos, "Wash the dishes", false, null);
+  Todos.addTask(todos, "Do the shopping", true, "2026-07-30");
+
 
   render();
 });
@@ -20,15 +24,31 @@ window.addEventListener("load", () => {
 // append a new task to the todo list.
 function addNewTodo() {
   const taskInput = document.getElementById("new-task-input");
+  const deadlineInput = document.getElementById("new-task-deadline");
+
   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() {
+  const newTodos = Todos.deleteCompleted(todos);
+
+  // Replace the old array contents
+  todos.length = 0;
+  todos.push(...newTodos);
+
+  render();
 }
 
+
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
 //   to avoid querying the DOM repeatedly inside render().
@@ -52,6 +72,28 @@ function render() {
 // - This variable is declared here to be close to the only function that uses it.
 const todoListItemTemplate = 
   document.getElementById("todo-item-template").content.firstElementChild;
+  function getDaysRemainingText(deadline) {
+    if (!deadline) return "";
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const deadlineDate = new Date(deadline);
+    deadlineDate.setHours(0, 0, 0, 0);
+
+    const msPerDay = 1000 * 60 * 60 * 24;
+    const diffDays = Math.round((deadlineDate - today) / msPerDay);
+
+    if (diffDays === 0) {
+      return "Due today";
+    } else if (diffDays > 0) {
+      return `${diffDays} day${diffDays === 1 ? "" : "s"} left`;
+    } else {
+      const overdueDays = Math.abs(diffDays);
+      return `Overdue by ${overdueDays} day${overdueDays === 1 ? "" : "s"}`;
+    }
+  }
+
 
 // Create a <li> element for the given todo task
 function createListItem(todo, index) {
@@ -61,6 +103,13 @@ function createListItem(todo, index) {
   if (todo.completed) {
     li.classList.add("completed");
   }
+  const deadlineEl = li.querySelector(".deadline");
+  if (todo.deadline) {
+    deadlineEl.textContent = getDaysRemainingText(todo.deadline);
+  } else {
+    deadlineEl.textContent = "";
+  }
+
 
   li.querySelector('.complete-btn').addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);

Sprint-3/todo-list/todos.mjs

@@ -10,10 +10,11 @@
 */
 
 // 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
 export function deleteTask(todos, taskIndex) {
   if (todos[taskIndex]) {
@@ -26,4 +27,7 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+export function deleteCompleted(todos) {
+  return todos.filter((todo) => !todo.completed);
+}

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

@@ -18,14 +18,13 @@ function createMockTodos() {
 }
 
 // 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", () => {
     let todos = [];
-    Todos.addTask(todos, theTask.task, theTask.completed);
-    expect(todos).toHaveLength(1);
-    expect(todos[0]).toEqual(theTask);
+   Todos.addTask(todos, theTask.task, theTask.completed);
+   expect(todos[todos.length - 1]).toEqual(theTask);
   });
 
   test("Should append a new task to the end of a ToDo list", () => {
@@ -130,3 +129,16 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+
+
+test("deleteCompleted removes all completed tasks", () => {
+  const todos = [
+    { task: "A", completed: true },
+    { task: "B", completed: false },
+    { task: "C", completed: true },
+  ];
+
+  const result = Todos.deleteCompleted(todos);
+
+  expect(result).toEqual([{ task: "B", completed: false }]);
+});