Connect JavaScript to the Board

The next job is to find the three task containers that JavaScript needs to fill.

In the starter markup, each Kanban column contains an element with the class .tasks. Select those elements in app.js.

const taskContainers = document.querySelectorAll(".tasks");

You also need a way to find the container for a particular status. Add a small helper:

function getTaskContainer(status) {
  return document.querySelector(`.column[data-status="${status}"] .tasks`);
}

The helper turns a data value such as "progress" into the matching DOM container.

Do not render cards yet. The goal of this lesson is only to make the connection between application data and the board structure.

Checkpoint

Temporarily test the helper in your script:

console.log(getTaskContainer("todo"));
console.log(getTaskContainer("progress"));
console.log(getTaskContainer("done"));

Each log should return the task area inside the matching column, not null.