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:
const dueInput = document.getElementById("due-input");
Update the object inside your add-task handler so it stores the date:
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:
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.