Render Tasks

Now connect the task data to the task list in the page.

1. Find the Task List

Open index.html and find the element used for the task list.

In the prepared project it has the ID task-list.

2. Select the Task List

At the top of script.js, add:

const taskList = document.getElementById("task-list");

3. Add the Render Function

Add this function below your task data:

function renderTasks() {
  taskList.innerHTML = "";

  tasks.forEach((task) => {
    const taskElement = document.createElement("li");
    taskElement.className = "task-row";

    taskElement.innerHTML = `
      <div class="task-main">
        <button class="task-check" type="button" aria-label="Complete task"></button>
        <span class="task-title">${task.title}</span>
      </div>
    `;

    taskList.appendChild(taskElement);
  });
}

4. Render the Tasks

At the bottom of the file, call the function:

renderTasks();

Save the file and refresh the browser.

The sample task should now appear in the task list.

5. Remove the Sample Task

Once you have confirmed that rendering works, change the task data back to an empty array:

const tasks = [];

Refresh the page. The task list should now be empty.

Checkpoint

The task list is now controlled by the tasks array. Adding a task to the array and calling renderTasks() should display it in the interface.