London | 26-ITP-May | Tomislav Dukez | Sprint 3 | Todo List

Sprint-3/todo-list/index.html

@@ -14,10 +14,15 @@
     <h1>My ToDo List</h1>
 
     <div class="todo-input">
-      <input type="text" id="new-task-input" placeholder="Enter a new task..." />
+      <input type="text" id="new-task-input" placeholder="Enter a new task..."/>
+      <input type="date" id="new-task-deadline" aria-label="Task Deadline" />
       <button id="add-task-btn">Add</button>
     </div>
 
+    <div class="todo-delete">
+      <button id="delete-completed-btn">Delete completed</button>
+    </div>
+
     <ul id="todo-list" class="todo-list">      
     </ul>
 
@@ -27,7 +32,10 @@ <h1>My ToDo List</h1>
     -->
     <template id="todo-item-template">
       <li class="todo-item"> <!-- include class "completed" if the task completed state is true -->
-        <span class="description">Task description</span>
+        <div class="todo-content">
+          <span class="description">Task description</span>
+          <span class="deadline-badge"><i class="fa-regular fa-calendar-days" aria-hidden="true"></i> <span class="deadline-date"></span></span>
+        </div>
         <div class="actions">
           <button class="complete-btn"><span class="fa-solid fa-check" aria-hidden="true"></span></button>
           <button class="delete-btn"><span class="fa-solid fa-trash" aria-hidden="true"></span></button>

Sprint-3/todo-list/script.mjs

@@ -1,4 +1,4 @@
-// Store everything imported from './todos.mjs' module as properties of an object named Todos 
+// 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
@@ -9,24 +9,36 @@ window.addEventListener("load", () => {
   document.getElementById("add-task-btn").addEventListener("click", addNewTodo);
 
   // Populate sample data
-  Todos.addTask(todos, "Wash the dishes", false); 
+  Todos.addTask(todos, "Wash the dishes", false);
   Todos.addTask(todos, "Do the shopping", true);
 
   render();
 });
 
+// Delete completed tasks
+document
+  .getElementById("delete-completed-btn")
+  .addEventListener("click", deleteCompletedTodos);
 
-// A callback that reads the task description from an input field and 
+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("new-task-deadline");
   const task = taskInput.value.trim();
+  const deadline = deadlineInput.value || null;
   if (task) {
-    Todos.addTask(todos, task, false);
+    Todos.addTask(todos, task, false, deadline);
     render();
   }
 
   taskInput.value = "";
+  deadlineInput.value = "";
 }
 
 // Note:
@@ -45,32 +57,69 @@ 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.
 // - This variable is declared here to be close to the only function that uses it.
-const todoListItemTemplate = 
+const todoListItemTemplate =
   document.getElementById("todo-item-template").content.firstElementChild;
 
 // 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 deadlineBadge = li.querySelector(".deadline-badge");
+  const deadlineDate = li.querySelector(".deadline-date");
+  const icon = deadlineBadge ? deadlineBadge.querySelector("i") : null;
+  if (todo.deadline) {
+    const diffDays = Todos.getDaysRemaining(todo.deadline);
+
+    // Clear existing styling classes from deadlineBadge (keep 'deadline-badge')
+    deadlineBadge.className = "deadline-badge";
+
+    // Clear icon classes
+    if (icon) {
+      icon.className = "";
+    }
+
+    if (diffDays < 0) {
+      deadlineBadge.classList.add("overdue");
+      deadlineDate.textContent = `Deadline: ${Math.abs(diffDays)} ${Math.abs(diffDays) === 1 ? 'day' : 'days'} overdue`;
+      if (icon) icon.className = "fa-solid fa-triangle-exclamation";
+    } else if (diffDays === 0) {
+      deadlineBadge.classList.add("due-today");
+      deadlineDate.textContent = "Deadline: Due today";
+      if (icon) icon.className = "fa-solid fa-clock";
+    } else if (diffDays === 1) {
+      deadlineBadge.classList.add("due-tomorrow");
+      deadlineDate.textContent = "Deadline: Due tomorrow";
+      if (icon) icon.className = "fa-solid fa-hourglass-half";
+    } else {
+      deadlineBadge.classList.add("due-future");
+      deadlineDate.textContent = `Deadline: ${diffDays} days left`;
+      if (icon) icon.className = "fa-regular fa-calendar-days";
+    }
+  } else {
+    if (deadlineBadge) {
+      deadlineBadge.remove();
+    }
+  }
+
   if (todo.completed) {
     li.classList.add("completed");
   }
 
-  li.querySelector('.complete-btn').addEventListener("click", () => {
+  li.querySelector(".complete-btn").addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
     render();
   });
-    
-  li.querySelector('.delete-btn').addEventListener("click", () => {
+
+  li.querySelector(".delete-btn").addEventListener("click", () => {
     Todos.deleteTask(todos, index);
     render();
   });
 
   return li;
-}
+}

Sprint-3/todo-list/style.css

@@ -31,17 +31,32 @@ h1 {
 }
 
 .todo-input input {
-  flex: 1;
   padding: 10px;
   font-size: 16px;
   border-radius: 6px;
   border: 1px solid #ccc;
+  outline: none;
+  transition: border-color 0.2s ease-in-out;
+}
+
+.todo-input input:focus {
+  border-color: #4caf50;
+}
+
+.todo-input input[type="text"] {
+  flex: 2;
+}
+
+.todo-input input[type="date"] {
+  flex: 1;
+  color: #555;
+  cursor: pointer;
 }
 
 .todo-input button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   border: none;
   border-radius: 6px;
@@ -68,14 +83,87 @@ h1 {
   background-color: #fff;
 }
 
-.description {
+.todo-delete {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#delete-completed-btn {
+  padding: 10px 20px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  background-color: #aa0000;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+#delete-completed-btn:hover {
+  background-color: #d10000;
+}
+
+.todo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   flex: 1;
   margin-right: 10px;
+  min-width: 0;
+}
+
+.description {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.deadline-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Overdue Badge (Red) */
+.deadline-badge.overdue {
+  color: #c62828;
+  background-color: #ffebee;
+  border: 1px solid #ffcdd2;
+}
+
+/* Due Today Badge (Orange) */
+.deadline-badge.due-today {
+  color: #146314;
+  background-color: #efffe3;
+  border: 1px solid #69eb68;
+}
+
+/* Due Tomorrow Badge (Indigo/Blue) */
+.deadline-badge.due-tomorrow {
+  color: #283593;
+  background-color: #e8eaf6;
+  border: 1px solid #c5cae9;
+}
+
+/* Due Future Badge (Green) */
+.deadline-badge.due-future {
+  color: #2e7d32;
+  background-color: #e8f5e9;
+  border: 1px solid #c8e6c9;
+}
+
+.todo-item.completed .deadline-badge {
+  background-color: #f5f5f5 !important;
+  color: #9e9e9e !important;
+  border-color: #e0e0e0 !important;
+}
+
 .actions {
   display: flex;
   gap: 10px;

Sprint-3/todo-list/todos.mjs

@@ -10,8 +10,12 @@
 */
 
 // 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 = null) {
+  const todo = { task, completed };
+  if (deadline) {
+    todo.deadline = deadline;
+  }
+  todos.push(todo);
 }
 
 // Delete todos[taskIndex] if it exists
@@ -26,4 +30,31 @@ export function toggleCompletedOnTask(todos, taskIndex) {
   if (todos[taskIndex]) {
     todos[taskIndex].completed = !todos[taskIndex].completed;
   }
-}
+}
+
+// Delete all completed todos from todos[]
+export function deleteCompleted(todos) {
+  for (let i = todos.length - 1; i >= 0; i--) {
+    if (todos[i].completed) {
+      deleteTask(todos, i);
+    }
+  }
+  return todos;
+}
+
+// Calculate how many days are left until the deadline (relative to today).
+// Returns an integer: negative if overdue, 0 if due today, positive if due in the future.
+export function getDaysRemaining(deadlineDateStr, today = new Date()) {
+  if (!deadlineDateStr) return null;
+  const [year, month, day] = deadlineDateStr.split("-").map(Number);
+  const deadlineDate = new Date(year, month - 1, day);
+  const todayDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  );
+
+  const diffTime = deadlineDate - todayDate;
+  const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+  return diffDays;
+}