Update instructions and improve code

Author: cjyuan

Sprint-3/todo-list/01-using_esm_with_nodejs_and_jest.md

@@ -4,7 +4,8 @@
 
 Node.js supports both CommonJS and ESM, with CommonJS being the default module system.
 
-To use ESM, we can add `"type": "module"` to `package.json`, or we can name the JS script files with `.mjs` file extension.
+To use ESM, we can add `"type": "module"` to `package.json`, or we can name the JavaScript files
+with `.mjs` file extension.
 
 **Important**:
 - Avoid mixing CommonJS and ESM in the same project unless you know what you're doing.
@@ -37,11 +38,13 @@ One way to execute Jest test script that uses ESM is to
 npm test -- <test_script_filename>
 ```
 
-**Note**: The `--` is optional if you do not have arguments to be forwarded to the underlying jest command.
+**Note**: The `--` is optional if you do not have arguments to be forwarded to the underlying 
+`jest` command.
 
 
 ## `jsdom`
 
-[**`jsdom`**](https://github.com/jsdom/jsdom), a pure-JavaScript implementation of DOM for use with Node.js, **does not yet support** `<script type="module">` tags in HTML.
+[**`jsdom`**](https://github.com/jsdom/jsdom), a pure-JavaScript implementation of DOM for 
+use with Node.js, **does not yet support** `<script type="module">` tags in HTML.
 
 Testing an ESM-based application with `jsdom` requires additional configuration and third-party tooling.

Sprint-3/todo-list/02-guide_to_modularize_code.md

@@ -1,6 +1,7 @@
 # Why modularize code?
 
-Modularizing code means breaking a program into smaller, self-contained pieces (modules), each responsible for a specific functionality. This approach offers several key advantages:
+Modularizing code means breaking a program into smaller, self-contained pieces (modules),
+each responsible for a specific functionality. This approach offers several key advantages:
 
 - Reusability – You can use the same code in different parts of a project or in other projects.
 - Maintainability – It's easier to fix bugs or update features when code is organized into smaller parts.
@@ -12,9 +13,19 @@ Modularizing code means breaking a program into smaller, self-contained pieces (
 
 ## How to break a program into smaller modules?
 
-This is a relatively big topic and you will learn more about how to modularize a web app in the SDC course.
+This is a relatively big topic and you will learn more about how to modularize a web app in the 
+SDC course.
 
-For starters, we recommend focusing on breaking a web app into the **non-UI part** and the **UI part**.
+For starters, we recommend focusing on breaking a web app into the **non-UI part** and 
+the **UI part**. Some of the advantages of doing so include:
+
+1. Easier Testing
+    - Non-UI code can be tested independently with unit tests.
+    - You don't need browser environments or DOM simulations (e.g., `jsdom`) for testing logic.
+
+2. Easier Collaboration
+    - UI developers and business-logic developers can work more independently.
+    - Clearer separation of concerns makes the codebase easier to maintain over time.
 
 ### The Non-UI Part of a Web App
 

Sprint-3/todo-list/README.md

@@ -24,25 +24,39 @@ To view the website, open `index.html` with Live Server in VS Code.
 
 ## Instructions
 
-In this exercise, your objective is to implement additional features.
+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.
 
-#### Feature 1: Mass delete of completed ToDos
+### Main Feature: Mass delete of completed ToDos
 
-Add a "Delete completed tasks" button that, when clicked, will delete all the completed ToDos. You should 
-- In `todos.mjs`, implement a function to delete all completed tasks in the given ToDo List
-- In `todos.test.mjs`, implement a test to check your function.
-- In `script.js`, call the function to delete all completed tasks whenever the user clicks a "Delete All" button.
+Add a button that deletes all completed tasks at once.
 
-#### Stretch 1: Set deadlines for ToDos
+Steps:
+1. In `index.html`, add a "Delete completed tasks" button.
 
-We want users to be able to set, and see, deadlines for their ToDos.
+2. In `todos.mjs`, implement a function `deleteCompleted(todoList)` that removes all completed 
+   ToDos from the given list.
 
-When creating a ToDo we want the user to be able to use a datepicker input to specify a deadline for the Todo.
-If no date is selected, the ToDo is considered having no deadline.
+3. In `todos.test.mjs`, write a Jest test that verifies `deleteCompleted()` works correctly.
+
+4. In `script.js`, call `deleteCompleted()` whenever the new button is clicked.
+    - ⚠️ You should not need to modify the `render()` function.
+
+### Stretch 1: Add deadlines for ToDos
+
+Allow users to set and view deadlines for their tasks.
+    - When creating a ToDo, let the user select a deadline using an HTML **datepicker** input.
+    - If no date is selected, the ToDo has **no deadline**.
+    - When rendering a ToDo in the list, display the deadline only if it exists.
+
+### Stretch 2: Extra Challenge – Show time remaining
+
+Instead of showing the deadline as a date, display how many days are left until the 
+deadline (relative to today).
+    - Decide how overdue ToDos should be handled and then implement your chosen solution.
+
+👉 Hint: You can use the [JavaScript Date API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+to calculate the difference.
 
-When displaying a ToDo in the list, display the deadline only if the ToDo has one.
 
-#### Stretch 2: EXTRA CHALLENGE
 
-Instead of displaying the date on the ToDo, implement a countdown of days left until the deadline. You can use the Javascript Date reference to accomplish this:
-https://www.w3schools.com/jsref/jsref_obj_date.asp

Sprint-3/todo-list/script.mjs

@@ -1,18 +1,10 @@
-// Note: Todos will be an object containing all the named exports from
-// the "./todos.mjs" module.
+// 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
 let todos = [];
 
-// First child of #todo-item-template is a <li> element.
-// We will create each ToDo list item as a clone of this node.
-const todoListItemTemplate = 
-  document.getElementById("todo-item-template").content.firstElementChild;
-
-const todoListEl = document.getElementById("todo-list");
-
-
+// Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
@@ -37,6 +29,12 @@ function addNewTodo() {
   taskInput.value = "";
 }
 
+// Note:
+// - Store the reference to the <ul> element with id "todo-list" here
+//   to avoid querying the DOM repeatedly inside render().
+// - This variable is declared here to be close to the only function that uses it.
+const todoListEl = document.getElementById("todo-list");
+
 // Render the whole todo list
 function render() {
   todoListEl.innerHTML = "";
@@ -47,6 +45,14 @@ function render() {
   });
 }
 
+
+// Note:
+// - First child of #todo-item-template is a <li> 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 = 
+  document.getElementById("todo-item-template").content.firstElementChild;
+
 // Create a <li> element for the given todo task
 function createListItem(todo, index) {
   const li = todoListItemTemplate.cloneNode(true); // true => Do a deep copy of the node

Sprint-3/todo-list/todos.test.mjs

@@ -1,15 +1,13 @@
-// The tests is designed to demonstrates we can test the functions
+// The tests is prepared to demonstrate we can test the functions
 // in a module independently.
 
 // Command to execute this script:
 //   npm test todos.test.mjs
 
-
 // Import all the exported members through an object
 import * as Todos from "./todos.mjs";
 
-// Return a mock ToDo List data
-// Tests in this file expect exactly 4 elements in the mocked ToDo List
+// Return a mock ToDo List data with exactly 4 elements.
 function createMockTodos() {
   return [
     { task: "Task 1 description", completed: true },
@@ -19,26 +17,26 @@ function createMockTodos() {
   ];
 }
 
+// A mock task to simulate user input
 const theTask = { task: "The Task", completed: false };
 
-
 describe("addTask()", () => {
-  test("Add a task to an empty array", () => {
+  test("Add a task to an empty ToDo list", () => {
     let todos = [];
     Todos.addTask(todos, theTask.task, theTask.completed);
     expect(todos).toHaveLength(1);
     expect(todos[0]).toEqual(theTask);
   });
 
-  test("Should append a task to end of an array", () => {
+  test("Should append a new task to the end of a ToDo list", () => {
 
     const todos = createMockTodos();
-    const lengthBeforeAddingTask = todos.length;
+    const lengthBeforeAddition = todos.length;
     Todos.addTask(todos, theTask.task, theTask.completed);
-    // Array should have one more task
-    expect(todos).toHaveLength(lengthBeforeAddingTask + 1);
+    // todos should now have one more task
+    expect(todos).toHaveLength(lengthBeforeAddition + 1);
 
-    // New task should be appended to the array
+    // New task should be appended to the todos
     expect(todos[todos.length - 1]).toEqual(theTask);
   });
 });
@@ -47,24 +45,24 @@ describe("deleteTask()", () => {
 
   test("Delete the first task", () => {
     const todos = createMockTodos();
-    const todosBeforeDeletion = createMockTodos();
-    const lengthBeforeAddingTask = todos.length;    
+    const todosBeforeDeletion = [...todos];
+    const lengthBeforeDeletion = todos.length;
     Todos.deleteTask(todos, 0);
 
-    expect(todos).toHaveLength(lengthBeforeAddingTask-1);
+    expect(todos).toHaveLength(lengthBeforeDeletion - 1);
 
     expect(todos[0]).toEqual(todosBeforeDeletion[1]);
     expect(todos[1]).toEqual(todosBeforeDeletion[2]);
     expect(todos[2]).toEqual(todosBeforeDeletion[3]);        
   });
 
-  test("Delete a middle task", () => {
+  test("Delete the second task (a middle task)", () => {
     const todos = createMockTodos();
-    const todosBeforeDeletion = createMockTodos();
-    const lengthBeforeAddingTask = todos.length;    
+    const todosBeforeDeletion = [...todos];
+    const lengthBeforeDeletion = todos.length;
     Todos.deleteTask(todos, 1);
 
-    expect(todos).toHaveLength(lengthBeforeAddingTask-1);
+    expect(todos).toHaveLength(lengthBeforeDeletion - 1);
 
     expect(todos[0]).toEqual(todosBeforeDeletion[0]);
     expect(todos[1]).toEqual(todosBeforeDeletion[2]);
@@ -73,11 +71,11 @@ describe("deleteTask()", () => {
 
   test("Delete the last task", () => {
     const todos = createMockTodos();
-    const todosBeforeDeletion = createMockTodos();
-    const lengthBeforeAddingTask = todos.length;    
-    Todos.deleteTask(todos, todos.length-1);
+    const todosBeforeDeletion = [...todos];
+    const lengthBeforeDeletion = todos.length;
+    Todos.deleteTask(todos, todos.length - 1);
 
-    expect(todos).toHaveLength(lengthBeforeAddingTask-1);
+    expect(todos).toHaveLength(lengthBeforeDeletion - 1);
 
     expect(todos[0]).toEqual(todosBeforeDeletion[0]);
     expect(todos[1]).toEqual(todosBeforeDeletion[1]);
@@ -86,7 +84,7 @@ describe("deleteTask()", () => {
 
   test("Delete a non-existing task", () => {
     const todos = createMockTodos();
-    const todosBeforeDeletion = createMockTodos();
+    const todosBeforeDeletion = [...todos];
     Todos.deleteTask(todos, 10);
     expect(todos).toEqual(todosBeforeDeletion);
 
@@ -100,18 +98,18 @@ describe("toggleCompletedOnTask()", () => {
   test("Expect the 'completed' property to toggle on an existing task", () => {
     const todos = createMockTodos();
     const taskIdx = 1;
-    const completedBeforeToggle = todos[taskIdx].completed;
+    const completedStateBeforeToggle = todos[taskIdx].completed;
     Todos.toggleCompletedOnTask(todos, taskIdx);
-    expect(todos[taskIdx].completed).toEqual(!completedBeforeToggle);
+    expect(todos[taskIdx].completed).toEqual(!completedStateBeforeToggle);
 
     // Toggle again
     Todos.toggleCompletedOnTask(todos, taskIdx);
-    expect(todos[taskIdx].completed).toEqual(completedBeforeToggle);  
+    expect(todos[taskIdx].completed).toEqual(completedStateBeforeToggle);
   });
 
-  test("Expect toggling on an existing task does not affect other tasks", () => {
+  test("Expect toggling on a task does not affect other tasks", () => {
     const todos = createMockTodos();
-    const todosBeforeToggle = createMockTodos();    
+    const todosBeforeToggle = [...todos];
     Todos.toggleCompletedOnTask(todos, 1);
 
     expect(todos[0]).toEqual(todosBeforeToggle[0]);    
@@ -122,7 +120,7 @@ describe("toggleCompletedOnTask()", () => {
 
   test("Expect no change when toggling on a non-existing task", () => {
     const todos = createMockTodos();
-    const todosBeforeToggle = createMockTodos();
+    const todosBeforeToggle = [...todos];
 
     Todos.toggleCompletedOnTask(todos, 10);
     expect(todos).toEqual(todosBeforeToggle);