Sync the Column Counts

The board headers contain counts, so those numbers should also come from tasks.

Add a small function that counts tasks for one status:

function countTasks(status) {
  return tasks.filter((task) => task.status === status).length;
}

Then update the count element inside each column. Use the existing count class from index.html.

function renderCounts() {
  document.querySelectorAll(".column").forEach((column) => {
    const status = column.dataset.status;
    const count = column.querySelector(".count");

    if (count) {
      count.textContent = countTasks(status);
    }
  });
}

Call it after rendering the cards:

function renderTasks() {
  // clear containers
  // render cards
  // update counts
}

Keep the calls together so one render updates the complete board.

Checkpoint

Add or remove an object from tasks and refresh.

The card positions and the three column counts should agree with the data.

Module result: JavaScript now owns the board state and can rebuild the visible Kanban board from that state.