diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
index ee3ef64fd..67aa117c6 100644
--- a/Sprint-3/todo-list/index.html
+++ b/Sprint-3/todo-list/index.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+
+
+ Todo List
+
+
+
+
+
Todo List
+
+
+
+
+
+
+
+
+
diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
index 61982a54f..612316f62 100644
--- a/Sprint-3/todo-list/script.js
+++ b/Sprint-3/todo-list/script.js
@@ -1,8 +1,41 @@
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 = `
No todos yet. Add one above!
`;
+ 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
// You will want to remove the ones in the current HTML after you have created them using JavaScript
let todos = [
@@ -12,14 +45,92 @@ let todos = [
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);
// 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).
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
index 8b1378917..bd9c17aeb 100644
--- a/Sprint-3/todo-list/style.css
+++ b/Sprint-3/todo-list/style.css
@@ -1 +1,138 @@
+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: #3936f4;
+ color: white;
+}
+
+.add-btn:hover {
+ background-color: #085a13;
+}
+
+.delete-all-btn {
+ background-color: #3936f4;
+ color: white;
+ margin-bottom: 20px;
+ margin-top: 30px;
+ margin-left: 100px;
+}
+
+.delete-all-btn:hover {
+ background-color: #dd1024;
+}
+
+#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;
+}
\ No newline at end of file