Open and Close the Task Form

Before creating tasks, make sure the existing modal can be controlled by JavaScript.

Open index.html and identify:

• the Add Task button
• the modal element
• the element that closes the modal

Select them in app.js using the IDs already provided by the starter: addTaskBtn, taskModal, and closeModalBtn.

Then connect the Add Task button to the modal’s open state. If your starter uses a class for visibility, toggle that class rather than changing inline styles.

A simple pattern is:

const addTaskButton = document.querySelector("#addTaskBtn");
const modal = document.querySelector("#taskModal");
const closeButton = document.querySelector("#closeModalBtn");

addTaskButton.addEventListener("click", () => {
  modal.classList.remove("hidden");
});

closeButton.addEventListener("click", () => {
  modal.classList.add("hidden");
});

The starter uses hidden, so removing that class shows the modal and adding it hides the modal.

Checkpoint

Click Add Task. The modal should appear.

Click the close control. It should disappear.

Do not add task creation logic yet. Keeping this step separate makes it easier to diagnose form problems later.