diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 4d12c4654..38f708600 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -1,40 +1,63 @@ - - - - ToDo List - - - - - - -
-

My ToDo List

- -
- - -
+ + + + Todo List + + + + +
+

My Todo List

+ +
+ + + + + +
+ +
+ +
- - - - - -
- - + + + + +
+ + \ No newline at end of file diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs index ba0b2ceae..fcb31b984 100644 --- a/Sprint-3/todo-list/script.mjs +++ b/Sprint-3/todo-list/script.mjs @@ -1,42 +1,65 @@ -// Store everything imported from './todos.mjs' module as properties of an object named Todos +// Import all exported functions from todos.mjs import * as Todos from "./todos.mjs"; -// To store the todo tasks +// Store todo tasks here const todos = []; -// Set up tasks to be performed once on page load +// Cache DOM elements so we do not query the DOM repeatedly +const todoListEl = document.getElementById("todo-list"); +const newTaskInputEl = document.getElementById("new-task-input"); +const deadlineInputEl = document.getElementById("deadline-input"); +const addTaskButtonEl = document.getElementById("add-task-btn"); +const deleteCompletedButtonEl = document.getElementById("delete-completed-btn"); + +// Template for each todo list item +const todoListItemTemplate = + document.getElementById("todo-item-template").content.firstElementChild; + +// Set up the app when the page loads window.addEventListener("load", () => { - document.getElementById("add-task-btn").addEventListener("click", addNewTodo); + addTaskButtonEl.addEventListener("click", addNewTodo); + deleteCompletedButtonEl.addEventListener("click", deleteCompletedTodos); - // Populate sample data - Todos.addTask(todos, "Wash the dishes", false); - Todos.addTask(todos, "Do the shopping", true); + // Hardcoded sample tasks shown on page load + Todos.addTask(todos, "Wash the dishes", false, ""); + Todos.addTask(todos, "Do the shopping", true, "2026-03-24"); + Todos.addTask(todos, "Prepare for Saturday class", false, "2026-03-26"); - render(); + populateTodoList(); }); - -// A callback that reads the task description from an input field and -// append a new task to the todo list. +/** + * Reads input values and adds a new todo to the list. + */ function addNewTodo() { - const taskInput = document.getElementById("new-task-input"); - const task = taskInput.value.trim(); - if (task) { - Todos.addTask(todos, task, false); - render(); + const task = newTaskInputEl.value.trim(); + const deadline = deadlineInputEl.value; + + // Do not add empty tasks + if (!task) { + return; } - taskInput.value = ""; + Todos.addTask(todos, task, false, deadline); + populateTodoList(); + + // Clear inputs after adding + newTaskInputEl.value = ""; + deadlineInputEl.value = ""; } -// Note: -// - Store the reference to the