Implemented the populateTodoList, addNewTodo, and deleteAllCompletedTodos functions

Author: Halimatou-saddiyaa

Sprint-3/todo-list/script.js

@@ -1,25 +1,73 @@
 function populateTodoList(todos) {
   let list = document.getElementById("todo-list");
-  // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
+  list.innerHTML = "";
+
+  todos.forEach((todo) => {
+    let li = document.createElement("li");
+    li.textContent = todo.task;
+    li.className = `list-group-item ${todo.completed ? "completed" : ""}`;
+
+    let span = document.createElement("span");
+    span.className = "badge bg-light rounded-pill";
+
+    let checkIcon = document.createElement("i");
+    checkIcon.className = "fa fa-check todo-icon";
+    checkIcon.setAttribute("aria-hidden", "true");
+    checkIcon.addEventListener("click", () => {
+      todo.completed = !todo.completed;
+      li.classList.toggle("completed");
+    });
+
+    let trashIcon = document.createElement("i");
+    trashIcon.className = "fa fa-trash todo-icon";
+    trashIcon.setAttribute("aria-hidden", "true");
+    trashIcon.addEventListener("click", () => {
+      const index = todos.indexOf(todo);
+      if (index > -1) {
+        todos.splice(index, 1);
+      }
+      populateTodoList(todos);
+    });
+
+    span.appendChild(checkIcon);
+    span.appendChild(trashIcon);
+
+    li.appendChild(span);
+
+    list.appendChild(li);
+  });
 }
 
-// These are the same todos that currently display in the HTML
-// You will want to remove the ones in the current HTML after you have created them using JavaScript
 let todos = [
   { task: "Wash the dishes", completed: false },
   { task: "Do the shopping", completed: false },
 ];
 
-populateTodoList(todos);
-
-// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal.
 function addNewTodo(event) {
-  // The code below prevents the page from refreshing when we click the 'Add Todo' button.
   event.preventDefault();
-  // Write your code here... and remember to reset the input field to be blank after creating a todo!
+  let input = document.getElementById("todoInput");
+  let newTask = input.value.trim();
+
+  if (/[^A-Za-z\s]/.test(newTask)) {
+    alert("Please enter letters and spaces only.");
+    input.value = "";
+    return;
+  }
+
+  if (newTask !== "") {
+    todos.push({ task: newTask, completed: false });
+    populateTodoList(todos);
+    input.value = "";
+  }
 }
+populateTodoList(todos);
 
-// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
 function deleteAllCompletedTodos() {
-  // Write your code here...
+  todos = todos.filter((todo) => !todo.completed);
+  populateTodoList(todos);
 }
+
+document.getElementById("todo-form").addEventListener("submit", addNewTodo);
+document
+  .getElementById("remove-all-completed")
+  .addEventListener("click", deleteAllCompletedTodos);