diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index 4d12c4654..bde28a9d4 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -1,40 +1,52 @@
-
+
-
-
-
- ToDo List
-
-
+
+
+
+ ToDo List
+
+
-
-
-
-
-
My ToDo List
+
+
+
+
+
My ToDo List
-
-
-
-
+
+
+
+
-
-
+
+
+
-
-
-
- Task description
-
-
-
-
-
-
-
-
-
+
+
+
+ Task description
+
+
+
+
+
+
+
+
diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json
index ce181158a..c60243236 100644
--- a/Sprint-3/todo-list/package.json
+++ b/Sprint-3/todo-list/package.json
@@ -1,3 +1,4 @@
+
{
"name": "todo-list",
"version": "1.0.0",
@@ -21,3 +22,4 @@
"jest": "^30.0.4"
}
}
+
diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs
index ba0b2ceae..207716d7f 100644
--- a/Sprint-3/todo-list/script.mjs
+++ b/Sprint-3/todo-list/script.mjs
@@ -1,4 +1,5 @@
-// 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
@@ -9,14 +10,20 @@ window.addEventListener("load", () => {
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
// Populate sample data
- Todos.addTask(todos, "Wash the dishes", false);
+ Todos.addTask(todos, "Wash the dishes", false);
Todos.addTask(todos, "Do the shopping", true);
+ document
+ .getElementById("delete-completed-btn")
+ .addEventListener("click", () => {
+ Todos.deleteCompleted(todos);
+ render();
+ });
+
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 +52,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 +68,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
+}
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
index 535e91227..8af9d2475 100644
--- a/Sprint-3/todo-list/style.css
+++ b/Sprint-3/todo-list/style.css
@@ -1,3 +1,4 @@
+
* {
box-sizing: border-box;
margin: 0;
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index f17ab6a25..e528030e8 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/Sprint-3/todo-list/todos.mjs
@@ -1,3 +1,4 @@
+
/*
A ToDo List (todos) is expected to be represented as an array of objects in
the following manner:
@@ -26,4 +27,10 @@ export function toggleCompletedOnTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos[taskIndex].completed = !todos[taskIndex].completed;
}
-}
\ No newline at end of file
+}
+
+export function deleteCompleted(todoList) {
+ const completed = todoList.filter((todo) => !todo.completed);
+ todoList.length = 0;
+ todoList.push(...completed);
+}
diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs
index bae7ae491..183282c53 100644
--- a/Sprint-3/todo-list/todos.test.mjs
+++ b/Sprint-3/todo-list/todos.test.mjs
@@ -1,3 +1,4 @@
+
// The tests is prepared to demonstrate we can test the functions
// in a module independently.
@@ -130,3 +131,12 @@ describe("toggleCompletedOnTask()", () => {
});
});
+test("deleteCompleted removes all completed tasks", () => {
+ const todoList = [
+ { task: "Wash dishes", completed: true },
+ { task: "Do shopping", completed: false },
+ { task: "Read book", completed: true },
+ ];
+ Todos.deleteCompleted(todoList);
+ expect(todoList).toEqual([{ task: "Do shopping", completed: false }]);
+});