Manchester | 26-ITP-Jan | Mehroz Munir | Sprint 3 | Todo 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-date" placeholder="Select deadline"/>
       <button id="add-task-btn">Add</button>
     </div>
 
@@ -28,13 +29,14 @@ <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-date-li"></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 id="delete-completed-btn">Delete Completed Tasks</button>
   </div>
 </body>
 </html>

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,28 +7,42 @@ const todos = [];
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
-
   // 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, null);
 
   render();
 });
 
+document
+  .getElementById("delete-completed-btn")
+  .addEventListener("click", () => {
+    Todos.deleteCompleted(todos);
+    render();
+  });
 
-// A callback that reads the task description from an input field and 
+// A callback that reads the task description and deadline date from input fields and
 // append a new task to the todo list.
 function addNewTodo() {
   const taskInput = document.getElementById("new-task-input");
+  const deadlineDateInput = document.getElementById("deadline-date");
   const task = taskInput.value.trim();
+  const deadlineDate = deadlineDateInput.value;
   if (task) {
-    Todos.addTask(todos, task, false);
+    Todos.addTask(todos, task, false, deadlineDate);
     render();
   }
 
   taskInput.value = "";
+  deadlineDateInput.value = "";
 }
 
+// Get today's date and convert it to YYYY-MM-DD format
+const today = new Date().toISOString().split("T")[0];
+
+// Set the 'min' attribute so past dates are unclickable
+document.getElementById("deadline-date").setAttribute("min", today);
+
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
 //   to avoid querying the DOM repeatedly inside render().
@@ -45,32 +59,34 @@ 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
 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.deadlineDate != null)
+    li.querySelector(".deadline-date-li").textContent = todo.deadlineDate;
+
   if (todo.completed) {
     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;
-}
+}

Sprint-3/todo-list/style.css

@@ -105,3 +105,17 @@ h1 {
   text-decoration: line-through;
   color: gray;
 }
+#delete-completed-btn{
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #eb4f37;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: block;    /* Must be block to use margin auto */
+  margin: 20px auto; /* 20px top/bottom, 'auto' left/right */
+}
+#delete-completed-btn:hover{
+  background-color: red;
+}

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, deadlineDate = null) {
+  todos.push({ task, completed, deadlineDate });
 }
 
 // Delete todos[taskIndex] if it exists
@@ -26,4 +26,11 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+
+// Delete all completed tasks
+export function deleteCompleted(todoList) {
+  for (let index = todoList.length - 1; index >= 0; index--) {
+    if (todoList[index].completed) todoList.splice(index, 1);
+  }
+}

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

@@ -13,12 +13,12 @@ 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 },
   ];
 }
 
 // A mock task to simulate user input
-const theTask = { task: "The Task", completed: false };
+const theTask = { task: "The Task", completed: false, deadlineDate: null };
 
 describe("addTask()", () => {
   test("Add a task to an empty ToDo list", () => {
@@ -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,40 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("Delete completed tasks", () => {
+    const todos = createMockTodos();
+    const todosBeforeDeletion = createMockTodos();
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toHaveLength(2);
+
+    expect(todos[0]).toEqual(todosBeforeDeletion[1]);
+    expect(todos[1]).toEqual(todosBeforeDeletion[3]);
+  });
+
+  test("Delete no task when none is completed", () => {
+    const todos = createMockTodos();
+    todos[0].completed = false;
+    todos[2].completed = false;
+    const lengthBeforeDeletion = todos.length;
+    Todos.deleteCompleted(todos);
+    const lengthAfterDeletion = todos.length;
+
+    expect(lengthBeforeDeletion).toEqual(lengthAfterDeletion);
+  });
+
+  test("when there are no tasks in the array the todos array will remain empty", () => {
+    const todos = [];
+    Todos.deleteCompleted(todos);
+    expect(todos).toEqual([]);
+  });
+
+  test("todos array will become empty when all the tasks are completed and deleteCompleted is called upon them", () => {
+    const todos = createMockTodos();
+    todos[1].completed = true;
+    todos[3].completed = true;
+    Todos.deleteCompleted(todos);
+    expect(todos).toEqual([]);
+  });
+});