diff --git a/Sprint-3/todo-list/README.md b/Sprint-3/todo-list/README.md index 265539285..35b586d92 100644 --- a/Sprint-3/todo-list/README.md +++ b/Sprint-3/todo-list/README.md @@ -14,7 +14,7 @@ Each ToDo task has two properties: To view the website, open `index.html` with Live Server in VS Code. -**Note**: The app is loaded **as ES modules** in the HTML file, and as such, the HTML file must be accessed via the HTTP or HTTPS protocol. +**Note**: The app is loaded **as ES modules** in the HTML file, and as such, the HTML file must be accessed via the HTTP or HTTPS protocol. In this project, we have included `http-server` as a dev-dependency, so after you `npm install`, you can run `npm run serve` from this directory to serve this project over HTTP. ## Understanding how the code is organized as ES modules diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json index 88cf5d4af..ce181158a 100644 --- a/Sprint-3/todo-list/package.json +++ b/Sprint-3/todo-list/package.json @@ -5,6 +5,7 @@ "description": "You must update this package", "type": "module", "scripts": { + "serve": "http-server", "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "repository": { @@ -16,6 +17,7 @@ }, "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", "devDependencies": { + "http-server": "^14.1.1", "jest": "^30.0.4" } } diff --git a/Sprint-3/todo-list/package.json-windows b/Sprint-3/todo-list/package.json-windows index c51e4327d..15eef950e 100644 --- a/Sprint-3/todo-list/package.json-windows +++ b/Sprint-3/todo-list/package.json-windows @@ -5,6 +5,7 @@ "description": "You must update this package", "type": "module", "scripts": { + "serve": "http-server", "test": "set NODE_OPTIONS=--experimental-vm-modules && jest" }, "repository": { @@ -16,6 +17,7 @@ }, "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", "devDependencies": { + "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 7d0cecd73..ba0b2ceae 100644 --- a/Sprint-3/todo-list/script.mjs +++ b/Sprint-3/todo-list/script.mjs @@ -2,7 +2,7 @@ import * as Todos from "./todos.mjs"; // To store the todo tasks -let todos = []; +const todos = []; // Set up tasks to be performed once on page load window.addEventListener("load", () => { @@ -58,8 +58,9 @@ 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) + 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 d11c00cd2..ffb29e6df 100644 --- a/Sprint-3/todo-list/todos.mjs +++ b/Sprint-3/todo-list/todos.mjs @@ -16,12 +16,14 @@ export function addTask(todos, task, completed = false) { // Delete todos[taskIndex] if it exists export function deleteTask(todos, taskIndex) { - if (todos[taskIndex]) + if (todos[taskIndex]) { todos.splice(taskIndex, 1); + } } // Toggle the "completed" property of todos[taskIndex] if the task exists. export function toggleCompletedOnTask(todos, taskIndex) { - if (todos[taskIndex]) + if (todos[taskIndex]) { todos[taskIndex].completed = !todos[taskIndex].completed; -} \ 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 3a9fa1514..33be81fd7 100644 --- a/Sprint-3/todo-list/todos.test.mjs +++ b/Sprint-3/todo-list/todos.test.mjs @@ -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); @@ -97,14 +96,14 @@ describe("toggleCompletedOnTask()", () => { test("Expect the 'completed' property to toggle on an existing task", () => { const todos = createMockTodos(); - const taskIdx = 1; - const completedStateBeforeToggle = todos[taskIdx].completed; - Todos.toggleCompletedOnTask(todos, taskIdx); - expect(todos[taskIdx].completed).toEqual(!completedStateBeforeToggle); + const taskIndex = 1; + const completedStateBeforeToggle = todos[taskIndex].completed; + Todos.toggleCompletedOnTask(todos, taskIndex); + expect(todos[taskIndex].completed).toEqual(!completedStateBeforeToggle); // Toggle again - Todos.toggleCompletedOnTask(todos, taskIdx); - expect(todos[taskIdx].completed).toEqual(completedStateBeforeToggle); + Todos.toggleCompletedOnTask(todos, taskIndex); + expect(todos[taskIndex].completed).toEqual(completedStateBeforeToggle); }); test("Expect toggling on a task does not affect other tasks", () => {