CodeYourFuture · Halimatou-saddiyaa · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -2,26 +2,42 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>To Do List App</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
   <body>
-    <form>
-      <div>
-        <input type="text" placeholder="New todo..." />
-      </div>
-      <div>
-        <button type="submit">Add Todo</button>
-        <button
-          type="button"
-          id="remove-all-completed"
-          class="btn btn-primary mb-3"
-        >
-          Remove all completed
-        </button>
-      </div>
-    </form>
+    <div class="todo-container">
+      <form onsubmit="addNewTodo(event)" id="todo-form">
+        <div>
+          <input
+            id="todoInput"
+            type="text"
+            placeholder="New todo..."
+            class="form-control"
+          />
+        </div>
+        <div>
+          <button type="submit" class="btn btn-primary mt-2">Add Todo</button>
+          <button
+            type="button"
+            id="remove-all-completed"
+            class="btn btn-primary mt-2"
+          >
+            Remove all completed
+          </button>
+        </div>
+      </form>
+      <ul id="todo-list" class="list-group mt-3"></ul>
+    </div>
     <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,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);
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
@@ -1 +1,65 @@
+.completed {
+  text-decoration: line-through;
+  color: gray;
+}
 
+.todo-icon {
+  cursor: pointer;
+  margin-left: 8px;
+  font-size: 1.2rem;
+  padding: 8px;
+  color: inherit;
+}
+
+.completed .fa-check {
+  color: green;
+}
+
+.todo-icon:hover {
+  opacity: 0.7;
+}
+
+.todo-container {
+  max-width: 400px;
+  margin: 50px auto;
+  text-align: center;
+}
+
+.todo-container form > div {
+  margin-bottom: 15px;
+}
+
+#todoInput {
+  width: 100%;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+button {
+  border-radius: 5px;
+  padding: 12px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  min-height: 44px;
+}
+
+button:hover {
+  opacity: 0.9;
+}
+
+.list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  margin-bottom: 8px;
+}
+
+.badge {
+  display: flex;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: #f8f9fa;
+  color: #000;
+  border-radius: 50px;
+}