CodeYourFuture · Forogh-Aghaeiyarijani · Apr 2, 2025 · Apr 8, 2025 · Apr 10, 2025 · cjyuan
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>ToDos</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -22,6 +22,9 @@
         </button>
       </div>
     </form>
+
+    <ul id="todo-list"></ul>
+
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,25 +1,70 @@
 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.className =
+      "list-group-item d-flex justify-content-between align-items-center";
+    li.textContent = todo.task;
+
+    if (todo.completed) {
+      li.style.textDecoration = "line-through";
+    }
+
+    let span = document.createElement("span");
+    span.className = "badge bg-primary rounded-pill";
+
+    let checkIcon = document.createElement("i");
+    checkIcon.className = "fa fa-check me-2";
+    checkIcon.style.cursor = "pointer";
+    checkIcon.addEventListener("click", () => {
+      todo.completed = !todo.completed;
+
+      populateTodoList(todos);
+    });
+
+    let trashIcon = document.createElement("i");
+    trashIcon.className = "fa fa-trash";
+    trashIcon.style.cursor = "pointer";
+    trashIcon.addEventListener("click", () => {
+      todos = todos.filter((currentTodo) => currentTodo !== todo);
+
+      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 inputField = document.querySelector("input[type='text']");
+  let taskText = inputField.value.trim();
+  if (taskText !== "") {
+    todos.push({ task: taskText, completed: false });
+    populateTodoList(todos);
+    inputField.value = "";
+  }
 }
 
-// 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).
+document.querySelector("form").addEventListener("submit", addNewTodo);
+
+document
+  .getElementById("remove-all-completed")
+  .addEventListener("click", deleteAllCompletedTodos);
+
 function deleteAllCompletedTodos() {
-  // Write your code here...
+  todos = todos.filter((todo) => !todo.completed);
+  populateTodoList(todos);
 }