London | 26-ITP-May | Khaliun Baatarkhuu | Sprint 3 | ToDo List

Sprint-3/todo-list/index.html

@@ -16,6 +16,10 @@ <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>
+
+      <button id="delete-completed-btn">
+        Delete Completed
+      </button>
     </div>
 
     <ul id="todo-list" class="todo-list">      

Sprint-3/todo-list/script.mjs

@@ -8,6 +8,13 @@ const todos = [];
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
+  document
+    .getElementById("delete-completed-btn")
+    .addEventListener("click", () => {
+      Todos.deleteCompleted(todos);
+      render();
+    });
+
   // Populate sample data
   Todos.addTask(todos, "Wash the dishes", false); 
   Todos.addTask(todos, "Do the shopping", true);

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);
+    }
+  }
 }

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

@@ -130,3 +130,26 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+
+  test("Should delete every completed task", () => {
+
+    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
+    });
+
+  });
+
+});