West-Midlands | ITP-May-26 | Maryam Janjua | Sprint 3 | Todo List

Sprint-3/todo-list/index.html

@@ -15,9 +15,10 @@ <h1>My ToDo List</h1>
 
     <div class="todo-input">
       <input type="text" id="new-task-input" placeholder="Enter a new task..." />
+      <input type="date" id="deadline-input"/>
       <button id="add-task-btn">Add</button>
     </div>
-
+    <button id="delete-completed-btn">Delete complete tasks</button>
     <ul id="todo-list" class="todo-list">      
     </ul>
 

Sprint-3/todo-list/script.mjs

@@ -7,28 +7,35 @@ 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);
 
   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 <ul> 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 <li> element.
 //   We will create each ToDo list item as a clone of this node.
@@ -56,8 +62,13 @@ const todoListItemTemplate =
 // Create a <li> 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");
   }

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;
-}
+}

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;
   }
-}
+}
+//delete complete tasks 
+export function deleteCompleted(todos) {
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      todos.splice(i, 1);
+    }
+  }
+}
+