diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 4d12c4654..120019f1f 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/package.json b/Sprint-3/todo-list/package.json index ce181158a..2262f3d00 100644 --- a/Sprint-3/todo-list/package.json +++ b/Sprint-3/todo-list/package.json @@ -5,8 +5,8 @@ "description": "You must update this package", "type": "module", "scripts": { - "serve": "http-server", - "test": "NODE_OPTIONS=--experimental-vm-modules jest" + "serve": "http-server", + "test": "set NODE_OPTIONS=--experimental-vm-modules && jest" }, "repository": { "type": "git", @@ -17,7 +17,7 @@ }, "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", "devDependencies": { - "http-server": "^14.1.1", + "http-server": "^14.1.1", "jest": "^30.0.4" } } diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs index ba0b2ceae..56d28e892 100644 --- a/Sprint-3/todo-list/script.mjs +++ b/Sprint-3/todo-list/script.mjs @@ -7,6 +7,7 @@ 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); @@ -20,13 +21,23 @@ window.addEventListener("load", () => { // append a new task to the todo list. function addNewTodo() { const taskInput = document.getElementById("new-task-input"); + const deadlineInput = document.getElementById("deadline-input"); + 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() { + Todos.deleteCompleted(todos); + render(); } // Note: @@ -58,9 +69,13 @@ 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.completed) { - li.classList.add("completed"); + + if (todo.deadline){ + li.querySelector(".deadline").textContent = `Deadline: ${todo.deadline}`; } + if (todo.completed) { + li.classList.add("completed"); + } li.querySelector('.complete-btn').addEventListener("click", () => { Todos.toggleCompletedOnTask(todos, index); diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs index f17ab6a25..f2430b316 100644 --- a/Sprint-3/todo-list/todos.mjs +++ b/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, deadline = null) { + todos.push({ task, completed, deadline }); } // Delete todos[taskIndex] if it exists @@ -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); + } + } } \ No newline at end of file diff --git a/Sprint-3/todo-list/todos.test.mjs b/Sprint-3/todo-list/todos.test.mjs index bae7ae491..c95d223d0 100644 --- a/Sprint-3/todo-list/todos.test.mjs +++ b/Sprint-3/todo-list/todos.test.mjs @@ -10,15 +10,15 @@ import * as Todos from "./todos.mjs"; // Return a mock ToDo List data with exactly 4 elements. function createMockTodos() { return [ - { 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 1 description", completed: true, deadline: null }, + { task: "Task 2 description", completed: false, deadline:null}, + { task: "Task 3 description", completed: true, deadline: null }, + { task: "Task 4 description", completed: false, deadline: null }, ]; } // 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", () => { @@ -130,3 +130,23 @@ describe("toggleCompletedOnTask()", () => { }); }); +describe("deleteCompleted()", () => { + test("Delete all completed tasks", () => { + const todos = createMockTodos(); + + Todos.deleteCompleted(todos); + + expect(todos).toHaveLength(2); + expect(todos[0]).toEqual({ + task: "Task 2 description", + completed: false, + deadline: null + }); + expect(todos[1]).toEqual({ + task: "Task 4 description", + completed: false, + deadline: null + }); + }); +}); +