Misc suggestions for todo list

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
 

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"
   }
 }

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"
   }
 }

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

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

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", () => {