fix: move clear completed logic to script.mjs

Author: MouawiaElkhalifa

Sprint-3/todo-list/index.html

@@ -18,23 +18,29 @@ <h1>My ToDo List</h1>
       <button id="add-task-btn">Add</button>
     </div>
 
-    <ul id="todo-list" class="todo-list">      
-    </ul>
+    <ul id="todo-list" class="todo-list"></ul>
+
+    <!-- ✅ NEW BUTTON -->
+    <button id="delete-completed-btn">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.
     -->
     <template id="todo-item-template">
-      <li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
+      <li class="todo-item">
         <span class="description">Task description</span>
         <div class="actions">
-          <button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
-          <button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>
+          <button class="complete-btn">
+            <span class="fa-solid fa-check" aria-hidden="true"></span>
+          </button>
+          <button class="delete-btn">
+            <span class="fa-solid fa-trash" aria-hidden="true"></span>
+          </button>
         </div>
       </li>
     </template>
 
   </div>
 </body>
-</html>
+</html>

Sprint-3/todo-list/script.mjs

@@ -1,26 +1,35 @@
-// 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
 const todos = [];
 
+// Store DOM references after page load
+let todoListEl;
+let todoListItemTemplate;
+
 // Set up tasks to be performed once on page load
 window.addEventListener("load", () => {
+  todoListEl = document.getElementById("todo-list");
+  todoListItemTemplate =
+    document.getElementById("todo-item-template").content.firstElementChild;
+
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
+  document.getElementById("delete-completed-btn").addEventListener("click", removeCompletedTodos);
 
   // 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");
   const task = taskInput.value.trim();
+
   if (task) {
     Todos.addTask(todos, task, false);
     render();
@@ -29,11 +38,11 @@ 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");
+// Remove all completed tasks
+function removeCompletedTodos() {
+  Todos.deleteCompleted(todos);
+  render();
+}
 
 // Render the whole todo list
 function render() {
@@ -45,29 +54,22 @@ 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
+  const li = todoListItemTemplate.cloneNode(true);
 
   li.querySelector(".description").textContent = todo.task;
+
   if (todo.completed) {
     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();
   });