diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs
index ba0b2ceae..efddc4ce8 100644
--- a/Sprint-3/todo-list/script.mjs
+++ b/Sprint-3/todo-list/script.mjs
@@ -7,7 +7,9 @@ const todos = [];
// Set up tasks to be performed once on page load
window.addEventListener("load", () => {
document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
-
+ document
+ .getElementById("delete-completed-btn")
+ .addEventListener("click", deleteCompletedTodos);
// Populate sample data
Todos.addTask(todos, "Wash the dishes", false);
Todos.addTask(todos, "Do the shopping", true);
@@ -15,20 +17,25 @@ window.addEventListener("load", () => {
render();
});
-
+function deleteCompletedTodos() {
+ Todos.deleteCompleted(todos);
+ 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 deadlineInput = document.getElementById("deadline-input");
const task = taskInput.value.trim();
+ const deadline = deadlineInput.value;
if (task) {
- Todos.addTask(todos, task, false);
+ Todos.addTask(todos, task, false, deadline);
+ console.log(todos);
render();
}
-
taskInput.value = "";
+ deadlineInput.value = "";
}
-
// Note:
// - Store the reference to the
element with id "todo-list" here
// to avoid querying the DOM repeatedly inside render().
@@ -45,7 +52,6 @@ function render() {
});
}
-
// Note:
// - First child of #todo-item-template is a
element.
// We will create each ToDo list item as a clone of this node.
@@ -56,8 +62,13 @@ const todoListItemTemplate =
// Create a
element for the given todo task
function createListItem(todo, index) {
const li = todoListItemTemplate.cloneNode(true); // true => Do a deep copy of the node
-
- li.querySelector(".description").textContent = todo.task;
+ const description = li.querySelector(".description");
+ if (todo.deadline) {
+ description.textContent = `${todo.task} - Deadline: ${todo.deadline}`;
+ }
+ else {
+ description.textContent = todo.task;
+ }
if (todo.completed) {
li.classList.add("completed");
}
diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css
index 535e91227..154a36691 100644
--- a/Sprint-3/todo-list/style.css
+++ b/Sprint-3/todo-list/style.css
@@ -38,6 +38,10 @@ h1 {
border: 1px solid #ccc;
}
+#deadline-input {
+ cursor: pointer;
+}
+
.todo-input button {
padding: 10px 20px;
font-size: 16px;
@@ -52,6 +56,22 @@ h1 {
background-color: #45a049;
}
+/* Delete completed tasks button */
+#delete-completed-btn {
+ padding: 10px 15px;
+ margin-bottom: 20px;
+ background-color: #e74c3c;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+#delete-completed-btn:hover {
+ background-color: #c0392b;
+}
+
.todo-list {
list-style-type: none;
padding-left: 0;
@@ -68,6 +88,10 @@ h1 {
background-color: #fff;
}
+.todo-item:hover {
+ background-color: #f9f9f9;
+}
+
.description {
flex: 1;
margin-right: 10px;
@@ -93,15 +117,24 @@ h1 {
height: 32px;
}
-.complete-btn i {
+.actions button:hover {
+ background-color: #eeeeee;
+ border-radius: 5px;
+}
+
+.complete-btn span {
color: green;
}
-.delete-btn i {
+.delete-btn span {
color: red;
}
+.todo-item.completed {
+ background-color: #f5f5f5;
+}
+
.todo-item.completed .description {
text-decoration: line-through;
color: gray;
-}
+}
\ No newline at end of file
diff --git a/Sprint-3/todo-list/todos.mjs b/Sprint-3/todo-list/todos.mjs
index f17ab6a25..b8a01f526 100644
--- a/Sprint-3/todo-list/todos.mjs
+++ b/Sprint-3/todo-list/todos.mjs
@@ -10,20 +10,31 @@
*/
// Append a new task to todos[]
-export function addTask(todos, task, completed = false) {
- todos.push({ task, completed });
+export function addTask(todos, task, completed = false, deadline = "") {
+ const todo = { task, completed };
+ if (deadline) {
+ todo.deadline = deadline;
+ }
+ todos.push(todo);
}
-
// Delete todos[taskIndex] if it exists
export function deleteTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos.splice(taskIndex, 1);
}
}
-
// Toggle the "completed" property of todos[taskIndex] if the task exists.
export function toggleCompletedOnTask(todos, taskIndex) {
if (todos[taskIndex]) {
todos[taskIndex].completed = !todos[taskIndex].completed;
}
-}
\ No newline at end of file
+}
+//delete complete tasks
+export function deleteCompleted(todos) {
+ for (let i = todos.length - 1; i >= 0; i--) {
+ if (todos[i].completed) {
+ todos.splice(i, 1);
+ }
+ }
+}
+