Open the Edit Modal

The prepared HTML already contains an edit modal with these controls:

• edit-modal-backdrop
• edit-form
• modal-title-input
• modal-due-input
• modal-priority-input
• modal-cancel
• modal-confirm

Connect an Edit button to the task it belongs to.

1. Find the selected task

function editTask(taskId) {
  const task = tasks.find((item) => item.id === taskId);

  if (!task) {
    return;
  }

  openEditModal(task);
}

2. Fill the modal fields

When the modal opens, copy the task’s current values into the prepared inputs:

document.getElementById("modal-title-input").value = task.title;
document.getElementById("modal-due-input").value = task.due || "";
document.getElementById("modal-priority-input").value = task.priority || "Medium";

Store the task ID in a variable so the Save button knows which task is being edited.

3. Show the modal

Remove the hidden state from #edit-modal-backdrop and focus the title input.

Checkpoint: Clicking Edit opens the prepared modal with the selected task’s current values.