diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 4d12c4654..8bb12d7ee 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -1,40 +1,45 @@ - - - - ToDo List - - - - - - -
-

My ToDo List

- -
- - -
- - - - - - -
- - + + + + + + \ No newline at end of file diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js new file mode 100644 index 000000000..318e701d3 --- /dev/null +++ b/Sprint-3/todo-list/script.js @@ -0,0 +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"); + list.innerHTML = ""; + todos.forEach((todo) => { + list.appendChild(createTodoElement(todo, todos)); + }); +} + +let todos = [ + { task: "Wash the dishes", completed: false }, + { task: "Do the shopping", completed: false }, +]; + +function addNewTodo(event) { + event.preventDefault(); + let input = document.getElementById("todoInput"); + let newTask = input.value.trim(); + + 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); \ No newline at end of file diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs deleted file mode 100644 index ba0b2ceae..000000000 --- a/Sprint-3/todo-list/script.mjs +++ /dev/null @@ -1,76 +0,0 @@ -// Store everything imported from './todos.mjs' module as properties of an object named Todos -import * as Todos from "./todos.mjs"; - -// To store the todo tasks -const todos = []; - -// Set up tasks to be performed once on page load -window.addEventListener("load", () => { - document.getElementById("add-task-btn").addEventListener("click", addNewTodo); - - // Populate sample data - Todos.addTask(todos, "Wash the dishes", false); - Todos.addTask(todos, "Do the shopping", true); - - render(); -}); - - -// A callback that reads the task description from an input field and -// append a new task to the todo list. -function addNewTodo() { - const taskInput = document.getElementById("new-task-input"); - const task = taskInput.value.trim(); - if (task) { - Todos.addTask(todos, task, false); - render(); - } - - taskInput.value = ""; -} - -// Note: -// - Store the reference to the