Create a New Task

Now connect the form to the tasks array.

Select the form and the five fields using the IDs already present in index.html: taskForm, taskTitle, taskDescription, taskPriority, taskStatus, and taskDate.

const form = document.querySelector("#taskForm");
const titleInput = document.querySelector("#taskTitle");
const descriptionInput = document.querySelector("#taskDescription");
const priorityInput = document.querySelector("#taskPriority");
const statusInput = document.querySelector("#taskStatus");
const dateInput = document.querySelector("#taskDate");

Then listen for submit:

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

  // read form values here
});

Preventing the default submission keeps the browser from navigating away from the application.

Read the values from the fields already present in the starter. Build one object using the same six properties used by your existing tasks:

const newTask = {
  id: Date.now(),
  title: titleInput.value.trim(),
  description: descriptionInput.value.trim(),
  priority: priorityInput.value,
  status: statusInput.value,
  date: dateInput.value
};

Before pushing it into the array, make sure the required title is not empty. Then add it and render the board again:

tasks.push(newTask);
renderTasks();

Finally, reset the form and close the modal after a successful submission.

These variable names now match the starter markup, so no HTML changes are needed.

Checkpoint

Create a task with a title, description, priority, status, and date.

The new card should appear in the selected column, and the corresponding count should increase.