CodingNic

Task Details and Editing

Add Due Dates to Tasks

Task Details and Editing 8 min read

Add Due Dates to Tasks

Add Due Dates to Tasks

The starter interface already has a date input with the ID due-input. Connect that value to every new task.

1. Read the due date

In js/script.js, get the input alongside the existing task input:

javascript
const dueInput = document.getElementById("due-input");

Update the object inside your add-task handler so it stores the date:

javascript
const task = {
  id: crypto.randomUUID(),
  title,
  due: dueInput.value,
  completed: false
};

Add the task as you already did in Module 2.

2. Reset the date field

After adding the task, clear the date input too:

javascript
dueInput.value = "";

3. Check the task data

Add a task with a due date, then inspect the task object in the browser console or temporarily log tasks.

You should see a due property containing the selected date.

Checkpoint: New tasks keep the due date that was selected when they were created. Tasks without a date keep an empty due value.