Render the Card Details

The board is working, but a task card needs to show the information the user cares about.

Continue inside createTaskCard(task) and add the remaining task fields using the existing card classes from the starter.

For example, a priority label can be created from the task’s priority value:

const priority = document.createElement("span");
priority.className = `priority ${task.priority}`;
priority.textContent = task.priority;

For the date, create another element and use textContent rather than inserting HTML:

const date = document.createElement("time");
date.textContent = task.date;

Append these elements into the parts of the card that the starter CSS already styles.

The key rule is that the card should read from task. Do not type a task title, priority, or date directly into the renderer.

Checkpoint

Inspect several cards in the browser.

Confirm that each visible value can be traced back to a property on the corresponding object in tasks.

Then change one task’s priority and date in app.js, refresh, and confirm the card changes without editing the HTML.