From 20ce01c0c77c06fe31446fc486f9dca720ea256f Mon Sep 17 00:00:00 2001
From: Angela McLeary <angela.mcleary@outlook.com>
Date: Mon, 23 Mar 2026 00:42:56 +0000
Subject: [PATCH 1/2] update implementation index.html and script.js with 
 delete button

---
 Sprint-3/todo-list/index.html     |  5 +++-
 Sprint-3/todo-list/script.mjs     | 39 +++++++++++++++++++++++--------
 Sprint-3/todo-list/todos.mjs      | 10 ++++++++
 Sprint-3/todo-list/todos.test.mjs | 18 ++++++++++++++
 4 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index 4d12c4654..ea6a06f85 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -20,7 +20,10 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
-
+    <button id="delete-completed-btn">
+      <!-- update styling -->
+      Delete completed tasks 
+    </button>
     <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.
diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs
index ba0b2ceae..b0d948e5a 100644
--- a/Sprint-3/todo-list/script.mjs
+++ b/Sprint-3/todo-list/script.mjs
@@ -1,4 +1,5 @@
-// Store everything imported from './todos.mjs' module as properties of an object named Todos 
+// 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
@@ -6,17 +7,35 @@ const todos = [];
 
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
+  //get the deleted complete button from html
+  const massDeleteBtn = document.querySelector("#delete-completed-btn");
+
+  // check if the button is even found in the HTML
+  // console.log("Button found:", massDeleteBtn);
+
+  if (massDeleteBtn) {
+    massDeleteBtn.addEventListener("click", () => {
+      // check if the click event is firing
+      // console.log("Mass delete button clicked!");
+      // console.log("Todos before delete:", JSON.parse(JSON.stringify(todos)));
+      Todos.deleteCompleted(todos);
+      // check if the array actually changed
+      // console.log("Todos after delete:", JSON.parse(JSON.stringify(todos)));
+      render();
+    });
+  }
+
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
   // Populate sample data
-  Todos.addTask(todos, "Wash the dishes", false); 
+  Todos.addTask(todos, "Wash the dishes", false);
   Todos.addTask(todos, "Do the shopping", true);
 
   render();
 });
 
 
-// A callback that reads the task description from an input field and 
+// A callback that reads the task description from an input field and
 // append a new task to the todo list.
 function addNewTodo() {
   const taskInput = document.getElementById("new-task-input");
@@ -31,7 +50,7 @@ function addNewTodo() {
 
 // Note:
 // - Store the reference to the <ul> element with id "todo-list" here
-//   to avoid querying the DOM repeatedly inside render().
+// 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");
 
@@ -48,9 +67,9 @@ 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.
+// 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 = 
+const todoListItemTemplate =
   document.getElementById("todo-item-template").content.firstElementChild;
 
 // Create a <li> element for the given todo task
@@ -62,15 +81,15 @@ function createListItem(todo, index) {
     li.classList.add("completed");
   }
 
-  li.querySelector('.complete-btn').addEventListener("click", () => {
+  li.querySelector(".complete-btn").addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
     render();
   });
-    
-  li.querySelector('.delete-btn').addEventListener("click", () => {
+
+  li.querySelector(".delete-btn").addEventListener("click", () => {
     Todos.deleteTask(todos, index);
     render();
   });
 
   return li;
-}
\ No newline at end of file
+}
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index f17ab6a25..e654311dd 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/Sprint-3/todo-list/todos.mjs
@@ -26,4 +26,14 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
+}
+
+// Removes all completed ToDos from the given list
+export function deleteCompleted(todos) {
+  // We iterate backwards to avoid index shifting issues during mutation
+  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..dd395f868 100644
--- a/Sprint-3/todo-list/todos.test.mjs
+++ b/Sprint-3/todo-list/todos.test.mjs
@@ -130,3 +130,21 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("should remove all completed tasks and keep only active ones", () => {
+    // 1. Setup a list with mixed states
+    const todos = [
+      { task: "Task A", completed: true },
+      { task: "Task B", completed: false },
+      { task: "Task C", completed: true }
+    ];
+
+    // 2. Execute the function
+    Todos.deleteCompleted(todos);
+
+    // 3. Verify: only Task B should remain
+    expect(todos).toHaveLength(1);
+    expect(todos[0].task).toBe("Task B");
+    expect(todos[0].completed).toBe(false);
+  });
+});
\ No newline at end of file

From b22e557602bb8c5dd8ea670237c810beef3ccfe2 Mon Sep 17 00:00:00 2001
From: Angela McLeary <angela.mcleary@outlook.com>
Date: Mon, 23 Mar 2026 23:07:05 +0000
Subject: [PATCH 2/2] add styling in style.css

---
 Sprint-3/todo-list/index.html |  6 ++----
 Sprint-3/todo-list/style.css  | 19 ++++++++++++++++++-
 Sprint-3/todo-list/todos.mjs  |  4 ++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index ea6a06f85..75ab46976 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -20,10 +20,8 @@ <h1>My ToDo List</h1>
 
     <ul id="todo-list" class="todo-list">      
     </ul>
-    <button id="delete-completed-btn">
-      <!-- update styling -->
-      Delete completed tasks 
-    </button>
+    <!-- i added this -->
+    <button id="delete-completed-btn" class="delete-completed-btn"><span class="fa-solid fa-trash-arrow-up" aria-hidden="true"></span> Delete Completed Tasks</button>
     <!-- 
       This is a template for the To-do list item. 
       It can simplify the creation of list item node in JS script.
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
index 535e91227..f8c5fa610 100644
--- a/Sprint-3/todo-list/style.css
+++ b/Sprint-3/todo-list/style.css
@@ -41,7 +41,7 @@ h1 {
 .todo-input button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   border: none;
   border-radius: 6px;
@@ -105,3 +105,20 @@ h1 {
   text-decoration: line-through;
   color: gray;
 }
+
+#delete-completed-btn {
+  width: 100%;
+  margin-top: 15px;
+  padding: 10px;
+  background-color: gray;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#delete-completed-btn:hover {
+  background-color: #e74c3c;
+}
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index e654311dd..1b8db1732 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/Sprint-3/todo-list/todos.mjs
@@ -30,10 +30,10 @@ export function toggleCompletedOnTask(todos, taskIndex) {
 
 // Removes all completed ToDos from the given list
 export function deleteCompleted(todos) {
-  // We iterate backwards to avoid index shifting issues during mutation
+  // Loop backwards so removing items doesn't shift indexes and skip elements
   for (let i = todos.length - 1; i >= 0; i--) {
     if (todos[i].completed) {
       todos.splice(i, 1);
     }
   }
-}
\ No newline at end of file
+}