From 51992bed26e4c5f26597e11045c7d33f3d47b8a5 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 21:56:36 +0200 Subject: [PATCH 1/5] Add deleteCompleted todo logic --- Sprint-3/todo-list/todos.mjs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs index f17ab6a25..d2ad7896c 100644 --- a/Sprint-3/todo-list/todos.mjs +++ b/Sprint-3/todo-list/todos.mjs @@ -26,4 +26,12 @@ export function toggleCompletedOnTask(todos, taskIndex) { if (todos[taskIndex]) { todos[taskIndex].completed = !todos[taskIndex].completed; } -} \ No newline at end of file +} + +export function deleteCompleted(todos) { + for (let i = todos.length - 1; i >= 0; i--) { + if (todos[i].completed) { + todos.splice(i, 1); + } + } +} From e19b8ffbc4d6cd269211a27d67d04ddea49a3a2e Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 21:56:36 +0200 Subject: [PATCH 2/5] Add tests for deleteCompleted --- Sprint-3/todo-list/todos.test.mjs | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs index d6bf96414..908ce0060 100644 --- a/Sprint-3/todo-list/todos.test.mjs +++ b/Sprint-3/todo-list/todos.test.mjs @@ -13,7 +13,7 @@ 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 }, ]; } @@ -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 = [...todos]; @@ -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 = [...todos]; 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 = [...todos]; @@ -130,3 +126,14 @@ describe("toggleCompletedOnTask()", () => { }); }); +describe("deletedCompleted()", () => { + test("removes all completed todos from the tasklist", () => { + const todos = [ + { task: "A", completed: true }, + { task: "B", completed: false }, + { task: "C", completed: true }, + ]; + Todos.deleteCompleted(todos); + expect(todos).toEqual([{ task: "B", completed: false }]); + }); +}); From 1ec5b3b5825fb1718a4bb5b381faf5194d499c96 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 22:01:11 +0200 Subject: [PATCH 3/5] Fix typo in describe("deleteCompleted()", () => { --- Sprint-3/todo-list/todos.test.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs index 908ce0060..19d014a6c 100644 --- a/Sprint-3/todo-list/todos.test.mjs +++ b/Sprint-3/todo-list/todos.test.mjs @@ -126,7 +126,7 @@ describe("toggleCompletedOnTask()", () => { }); }); -describe("deletedCompleted()", () => { +describe("deleteCompleted()", () => { test("removes all completed todos from the tasklist", () => { const todos = [ { task: "A", completed: true }, From 83bb0d127e66e3222b217ecddba4ad32c0f01303 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 22:34:46 +0200 Subject: [PATCH 4/5] Add bulk delete button to todo app --- Sprint-3/todo-list/index.html | 76 +++++++++++++++++++++-------------- Sprint-3/todo-list/script.mjs | 25 +++++++----- 2 files changed, 60 insertions(+), 41 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 4d12c4654..c8bc53c71 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -1,40 +1,54 @@ - + - - - - ToDo List - - + + + + ToDo List + + - - - -
-

My ToDo List

+ + + +
+

My ToDo List

-
- - -
+
+ + +
+ +
+ +
-
    -
+
    - - - -
    - + +
    + diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs index ba0b2ceae..c000eca72 100644 --- a/Sprint-3/todo-list/script.mjs +++ b/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 @@ -8,15 +8,21 @@ 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, "Wash the dishes", false); Todos.addTask(todos, "Do the shopping", true); render(); }); - -// A callback that reads the task description from an input field and +// A callback that reads the task description from an input field and // append a new task to the todo list. function addNewTodo() { const taskInput = document.getElementById("new-task-input"); @@ -45,12 +51,11 @@ function render() { }); } - // Note: // - First child of #todo-item-template is a
  • 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
  • element for the given todo task @@ -62,15 +67,15 @@ function createListItem(todo, index) { 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; -} \ No newline at end of file +} From 36028a3dab62793bf78f0d369452277aaebf4e3e Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sun, 26 Apr 2026 13:16:13 +0200 Subject: [PATCH 5/5] Style V checkmark button for a better visual representation --- Sprint-3/todo-list/style.css | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 535e91227..6d7a56096 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -41,7 +41,7 @@ h1 { .todo-input button { padding: 10px 20px; font-size: 16px; - background-color: #4CAF50; + background-color: #4caf50; color: white; border: none; border-radius: 6px; @@ -93,14 +93,36 @@ h1 { height: 32px; } -.complete-btn i { - color: green; +.complete-btn .fa-check { + color: #888; +} + +.todo-item.completed .complete-btn .fa-check { + color: rgb(14, 200, 14); } .delete-btn i { color: red; } +#delete-completed-btn { + width: 100%; + padding: 12px 0; + font-size: 16px; + background-color: #e53935; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + margin-bottom: 20px; + margin-top: 0.5em; + transition: background 0.2s; +} + +#delete-completed-btn:hover { + background-color: #b71c1c; +} + .todo-item.completed .description { text-decoration: line-through; color: gray;