CodeYourFuture · hibosharif202504 · Jul 25, 2025 · Aug 12, 2025 · Aug 12, 2025 · Aug 12, 2025
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -3,25 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Todo list</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <form>
-      <div>
-        <input type="text" placeholder="New todo..." />
+
+      <div class=" container">
+        <h1> Todo List</h1>
+        <form class=""add-todo-form>
+        <input type="text"  id="new-todo-input" placeholder="New todo..." />
+        <button type="submit" class="add-btn">Add Todo</button>
+      </form>
+        <button onclick="deleteAllCompletedTodos()" class="delete-all-btn">Delete All Completed</button>
+        <ul id="todo-list"></ul>
+
       </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>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,6 +1,39 @@
+// Write your code here...
 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 = ""; // clears the available list
+  if (todos.length === 0) {
+    list.innerHTML = `<li class="empty-state">No todos yet. Add one above!</li>`;
+    return;
+  }
+  todos.forEach((todo, index) => {
+    // create the todo elements
+    const listItem = document.createElement("li"); // create list item
+    listItem.className = todo.completed ? "todo-item completed" : "todo-item";
+
+    let todoText = document.createElement("span");
+    todoText.className = todo.completed ? "todo-text completed" : "todo-text";
+    todoText.textContent = todo.task;
+
+    let completeButton = document.createElement("button"); // create complete button
+    completeButton.className = todo.completed
+      ? "complete-btn completed"
+      : "complete-btn";
+    completeButton.textContent = todo.completed ? "Undo" : "Complete";
+    completeButton.onclick = () => toggleComplete(index);
+
+    let deleteButton = document.createElement("button"); // create delete button
+    deleteButton.className = "delete-btn";
+    deleteButton.textContent = "Delete";
+    deleteButton.onclick = () => deleteTodo(index);
+
+    listItem.appendChild(todoText); // append elements to list item
+    listItem.appendChild(completeButton);
+    listItem.appendChild(deleteButton);
+
+    list.appendChild(listItem); // append list item to todo list
+  });
 }
 
 // These are the same todos that currently display in the HTML
@@ -10,16 +43,90 @@ let todos = [
   { task: "Do the shopping", completed: false },
 ];
 
-populateTodoList(todos);
+function toggleComplete(index) {
+  // function to toggle complete status
+  todos[index].completed = !todos[index].completed;
+  populateTodoList(todos);
+}
+
+function deleteTodo(index) {
+  //function to delete specific todo
+  todos.splice(index, 1);
+  populateTodoList(todos);
+}
+
+populateTodoList(todos); // initial population
 
 // 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("new-todo-input") ||
+    document.getElementById("todo-input") ||
+    document.querySelector('input[type="text"]');
+
+  let todoText = input.value.trim();
+
+  if (todoText === "") {
+    alert("Please enter a todo item!");
+    return;
+  }
+  let newTodo = {
+    // create new todo object
+    task: todoText,
+    completed: false,
+  };
+
+  todos.push(newTodo); // ad todos array
+
+  input.value = ""; //clear input field
+
+  populateTodoList(todos); //refresh the todo list
 }
 
-// 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).
+// Advanced challenge: Write a function 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); // filter out the completed todos
+
+  populateTodoList(todos); // refresh the display
+
+  console.log("The completed todos are deleted!");
 }
+// Event listener
+document.addEventListener("DOMContentLoaded", function () {
+  // Try to find the form by different selectors
+  let form =
+    document.querySelector("form") ||
+    document.querySelector(".add-todo-form") ||
+    document.getElementById("todo-form");
+
+  if (form) {
+    form.addEventListener("submit", addNewTodo);
+  } else {
+    console.log(
+      "No form found. Make sure your HTML has a form element or call addNewTodo() directly from a button onclick."
+    );
+
+    // Try to find an add button and attach the event
+    let addButton =
+      document.querySelector('button[type="submit"]') ||
+      document.querySelector(".add-btn") ||
+      document.getElementById("add-todo-btn");
+
+    if (addButton) {
+      addButton.addEventListener("click", addNewTodo);
+    }
+  }
+
+  // Try to find delete all completed button
+  let deleteAllBtn =
+    document.querySelector(".delete-all-btn") ||
+    document.getElementById("delete-all-btn");
+
+  if (deleteAllBtn) {
+    deleteAllBtn.addEventListener("click", deleteAllCompletedTodos);
+  }
+});
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
@@ -1 +1,136 @@
+body {
+    font-family: Arial, sans-serif;
+    max-width: 600px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
 
+.container {
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+}
+
+.add-todo-form {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 30px;
+}
+
+#new-todo-input {
+    flex: 1;
+    padding: 12px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+#new-todo-input:focus {
+    outline: none;
+    border-color: #4CAF50;
+}
+
+button {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+.add-btn {
+    background-color: #a2af4c;
+    color: white;
+}
+
+.add-btn:hover {
+    background-color: #a0458c;
+}
+
+.delete-all-btn {
+    background-color: #3936f4;
+    color: white;
+    margin-bottom: 20px;
+}
+
+.delete-all-btn:hover {
+    background-color: #0bdac2;
+}
+
+#todo-list {
+    list-style: none;
+    padding: 0;
+}
+
+.todo-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    border-left: 4px solid #547f56;
+}
+
+.todo-item.completed {
+    border-left-color: #ccc;
+    background-color: #f0f0f0;
+}
+
+.todo-text {
+    flex: 1;
+    font-size: 16px;
+    transition: all 0.3s;
+}
+
+.todo-text.completed {
+    text-decoration: line-through;
+    color: #888;
+}
+
+.complete-btn {
+    background-color: #2196F3;
+    color: white;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+
+.complete-btn:hover {
+    background-color: #1976D2;
+}
+
+.complete-btn.completed {
+    background-color: #FF9800;
+}
+
+.complete-btn.completed:hover {
+    background-color: #F57C00;
+}
+
+.delete-btn {
+    background-color: #f44336;
+    color: white;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+
+.delete-btn:hover {
+    background-color: #da190b;
+}
+
+.empty-state {
+    text-align: center;
+    color: #888;
+    font-style: italic;
+    padding: 40px;
+}