diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
index 61982a54f..aa26f3ae9 100644
--- a/Sprint-3/todo-list/script.js
+++ b/Sprint-3/todo-list/script.js
@@ -1,25 +1,84 @@
+function toggleTodoCompletion(todo) {
+ todo.completed = !todo.completed;
+}
+
+function removeTodo(todos, todo) {
+ return todos.filter((t) => t !== todo);
+}
+
+function deleteAllCompletedTodos() {
+ todos = todos.filter((todo) => !todo.completed);
+ populateTodoList(todos);
+}
+
+function createTodoElement(todo, todos) {
+ 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", () => {
+ toggleTodoCompletion(todo);
+ li.classList.toggle("completed");
+ });
+
+ let trashIcon = document.createElement("i");
+ trashIcon.className = "fa fa-trash todo-icon";
+ trashIcon.setAttribute("aria-hidden", "true");
+ trashIcon.addEventListener("click", () => {
+ todos = removeTodo(todos, todo);
+ populateTodoList(todos);
+ });
+
+ span.appendChild(checkIcon);
+ span.appendChild(trashIcon);
+ li.appendChild(span);
+
+ return li;
+}
+
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) => {
+ list.appendChild(createTodoElement(todo, todos));
+ });
}
-// 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();
-// 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...
+ if (newTask === "") {
+ alert("Input field cannot be empty.");
+ return;
+ }
+
+ if (/[^A-Za-z\s]/.test(newTask)) {
+ alert("Please enter letters and spaces only.");
+ input.value = "";
+ return;
+ }
+
+ todos.push({ task: newTask, completed: false });
+ populateTodoList(todos);
+ input.value = "";
}
+
+document.getElementById("add-btn").addEventListener("click", addNewTodo);
+document
+ .getElementById("remove-all-completed")
+ .addEventListener("click", deleteAllCompletedTodos);
+
+populateTodoList(todos);
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
index 8b1378917..4baf9d888 100644
--- 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;
+}