CodeYourFuture · MacDonald91 · Mar 17, 2026 · Mar 21, 2026
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
+    <link rel="stylesheet" href="style.css">
     <script defer src="quotes.js"></script>
   </head>
   <body>

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,18 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+function displayRandomQuote() {
+  const randomQuote = pickFromArray(quotes);
+
+  document.getElementById("quote").textContent = randomQuote.quote;
+  document.getElementById("author").textContent = randomQuote.author;
+}
+
+// run when page loads2
+displayRandomQuote();
+
+// button click
+document
+  .getElementById("new-quote")
+  .addEventListener("click", displayRandomQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,37 @@
 /** Write your CSS in here **/
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  text-align: center;
+  padding: 50px;
+}
+
+h1 {
+  color: #333;
+}
+
+#quote {
+  font-size: 1.5rem;
+  margin: 20px 0;
+  color: #222;
+}
+
+#author {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 30px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 1rem;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -18,6 +18,8 @@ <h1>My ToDo List</h1>
       <button id="add-task-btn">Add</button>
     </div>
 
+    <button id="delete-completed-btn">Delete Completed</button>
+
     <ul id="todo-list" class="todo-list">      
     </ul>
 

diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "serve": "http-server",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
+    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest"
   },
   "repository": {
     "type": "git",
@@ -20,4 +20,4 @@
     "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
@@ -8,6 +8,13 @@ const todos = [];
 window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
+   document
+    .getElementById("delete-completed-btn")
+    .addEventListener("click", () => {
+      Todos.deleteCompleted(todos);
+      render();
+    });
+
   // Populate sample data
   Todos.addTask(todos, "Wash the dishes", false); 
   Todos.addTask(todos, "Do the shopping", true);

diff --git a/Sprint-3/todo-list/todos.js b/Sprint-3/todo-list/todos.js
@@ -0,0 +1,23 @@
+// Add a new task
+export function addTask(todos, task, completed) {
+  todos.push({ task, completed });
+}
+
+// Delete a task by index
+export function deleteTask(todos, index) {
+  if (index < 0 || index >= todos.length) return;
+  todos.splice(index, 1);
+}
+
+// Toggle completed status
+export function toggleCompletedOnTask(todos, index) {
+  if (index < 0 || index >= todos.length) return;
+  todos[index].completed = !todos[index].completed;
+}
+
+// Delete all completed tasks
+export function deleteCompleted(todos) {
+  const remaining = todos.filter((todo) => !todo.completed);
+  todos.length = 0;
+  todos.push(...remaining);
+}
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
diff --git a/Sprint-3/todo-list/todos.test.mjs → Sprint-3/todo-list/todos.test.js b/Sprint-3/todo-list/todos.test.mjs → Sprint-3/todo-list/todos.test.js
@@ -5,7 +5,7 @@
 //   npm test todos.test.mjs
 
 // Import all the exported members through an object
-import * as Todos from "./todos.mjs";
+import * as Todos from "./todos.js";
 
 // Return a mock ToDo List data with exactly 4 elements.
 function createMockTodos() {
@@ -130,3 +130,40 @@ describe("toggleCompletedOnTask()", () => {
   });
 });
 
+describe("deleteCompleted()", () => {
+  test("removes all completed tasks from the list", () => {
+    const todos = createMockTodos();
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toEqual([
+      { task: "Task 2 description", completed: false },
+      { task: "Task 4 description", completed: false },
+    ]);
+  });
+
+  test("does nothing if no tasks are completed", () => {
+    const todos = [
+      { task: "Task A", completed: false },
+      { task: "Task B", completed: false },
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toEqual([
+      { task: "Task A", completed: false },
+      { task: "Task B", completed: false },
+    ]);
+  });
+
+  test("removes all tasks if all are completed", () => {
+    const todos = [
+      { task: "Task A", completed: true },
+      { task: "Task B", completed: true },
+    ];
+
+    Todos.deleteCompleted(todos);
+
+    expect(todos).toEqual([]);
+  });
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,8 @@ <h1>My ToDo List</h1> @@
           <button id="add-task-btn">Add</button>
         </div>
+        <button id="delete-completed-btn">Delete Completed</button>
         <ul id="todo-list" class="todo-list">
         </ul>
@@ Expand Down @@