Build the Task Renderer

Now turn one task object into one task card.

Keep the work in two pieces: a function that creates a card, and a function that decides where every card belongs.

Start with the card function. Use the classes already present in the starter CSS so the existing design does the visual work.

javascript

function createTaskCard(task) {
  const card = document.createElement("article");
  card.className = "task-card";
  card.dataset.id = task.id;

  const main = document.createElement("div");
  main.className = "task-main";

  const title = document.createElement("h3");
  title.textContent = task.title;

  const description = document.createElement("p");
  description.textContent = task.description;

  main.append(title, description);

  const meta = document.createElement("div");
  meta.className = "task-meta";

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

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

  meta.append(priority, date);
  card.append(main, meta);

  return card;
}

Your starter may already contain additional card elements such as priority and date. Add those pieces one at a time, following the existing HTML classes in index.html and the styling in style.css.

Next, create the renderer:

javascript

function renderTasks() {
  taskContainers.forEach((container) => {
    container.replaceChildren();
  });

  tasks.forEach((task) => {
    const container = getTaskContainer(task.status);
    if (!container) return;

    container.append(createTaskCard(task));
  });
}

There are two important stages here: clear the old generated cards, then rebuild them from tasks.

Call the renderer once after defining it:

javascript

renderTasks();

Checkpoint

Refresh the page. The cards should now come from tasks rather than from the sample card markup.

Change a task’s status from todo to done, refresh, and confirm that the card appears in the Done column.