Update files based on Daniel feedback

Author: cjyuan

Sprint-3/todo-list/README.md

@@ -12,17 +12,49 @@ Each ToDo task has two properties:
 
 ## Installation
 
-To view the website, open `index.html` with Live Server in VS Code.
+Run the following command in this directory to install all required dependencies: 
+```
+  npm install
+```
+> This will install
+- `jest` - for running unix test
+- `http-server` - for serving `index.html` over HTTP
+ 
+**Note:** If you are using a Windows CLI, replace `package.json` by `package.json-windows`.
+
+## Running the App 
+
+Since the app uses **ES modules**, the HTML file **must be loaded via HTTP/HTTPS** rather than
+directly from the file system.
+
+Make sure you run the server in this directory where `index.html` is located.
+
+Two possible ways to serve `index.html` over HTTP:
+
+#### Option 1: `http-server`
+
+1. Run 
+   ```
+   npm run serve
+   ```
+   > Here, `serve` is a shortcut defined in `package.json` for running `http-server`.
+  
+  
+2. Open one of the URLs shown in the terminal (e.g., `http://127.0.0.1:8080`).
+
+
+#### Option 2: Open `index.html` with Live Server in VSCode.
 
-**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.
 
 ## Understanding how the code is organized as ES modules
 
 - [What is ES Modules?](00-what_is_ES_modules.md)
 - [How to use ES modules with Node.js and Jest?](01-using_esm_with_nodejs_and_jest.md)
 - [A guide to modularize a web app](02-guide_to_modularize_code.md)
 
-## Instructions
+---
+
+## Exercise Instructions
 
 In this exercise, your objective is to extend the ToDo app by implementing new features. 
 Start with the main feature and then try the stretch goals if you have extra time.

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

@@ -97,14 +97,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", () => {