deadline

Author: alizada-dev

Sprint-3/todo-list/index.html

@@ -15,6 +15,7 @@ <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>
 
@@ -28,6 +29,7 @@ <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>
+        <span class="deadline"></span>
         <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

@@ -20,13 +20,17 @@ window.addEventListener("load", () => {
 // 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 || null;
   if (task) {
-    Todos.addTask(todos, task, false);
+    Todos.addTask(todos, task, false, deadline);
     render();
   }
 
   taskInput.value = "";
+  deadlineInput.value = "";
 }
 
 // Note:
@@ -62,6 +66,16 @@ function createListItem(todo, index) {
     li.classList.add("completed");
   }
 
+  const deadlineEl = li.querySelector(".deadline");
+
+  if (todo.deadline) {
+    const date = new Date(todo.deadline);
+    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    deadlineEl.textContent = ` (Due: ${formattedDate})`;
+  } else {
+    deadlineEl.textContent = "";
+  }
+
   li.querySelector('.complete-btn').addEventListener("click", () => {
     Todos.toggleCompletedOnTask(todos, index);
     render();

Sprint-3/todo-list/todos.mjs

@@ -10,8 +10,8 @@
 */
 
 // 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) {
+  todos.push({ task, completed, deadline });
 }
 
 // Delete todos[taskIndex] if it exists