Display Due Dates and Priorities

The data is now stored. Next, update renderTasks() so the task list shows the information that belongs to each task.

1. Add the due date to the task row

Inside the markup generated for a task, add a details area beneath the title:

<div class="task-details">
  <span class="task-due">${task.due || "No due date"}</span>
</div>

Use the same class names already provided by the prepared styles where they exist in your starter project.

2. Add the priority

Add the stored priority beside the task details:

<span class="badge ${task.priority.toLowerCase()}">${task.priority}</span>

This lets the prepared CSS apply the correct visual treatment for High, Medium, and Low.

3. Render from the task object

Do not hard-code the displayed values. The row should always read task.due and task.priority from the current task.

Create tasks with different dates and priorities, then toggle them complete and delete a few to make sure the details continue to belong to the correct task.

Checkpoint: Every task row displays its title, due date information, and priority from the task data.