Add a Task

Now connect the Add Task form to the task array.

1. Find the Form Elements

In index.html, find the prepared task form.

The project uses:

• task-form for the form
• task-input for the task title input

2. Select the Form and Input

Add these selections near the top of script.js:

const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");

3. Add the Form Handler

Add:

taskForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const title = taskInput.value.trim();

  if (!title) {
    return;
  }

  tasks.push({
    id: crypto.randomUUID(),
    title,
    completed: false
  });

  taskInput.value = "";
  renderTasks();
});

4. Test the Form

Refresh the page and enter a task.

Click the Add Task button.

The task should appear in the list.

Add several tasks and confirm that each one appears.

Checkpoint

You should now be able to create multiple tasks from the form and see them immediately in the list.