Read the Board and Form

Open index.html and find the three elements with the class column.

Each column has a data-status attribute:

todo
progress
done

These values will later become the connection between task data and the visible board.

Inside each column, find its .tasks element.

The structure is roughly:

column
├── column header
│   ├── title
│   └── count
└── tasks
    └── task cards

Now find the Add Task button and the modal.

Inside the form, locate:

#taskTitle
#taskDescription
#taskPriority
#taskStatus
#taskDate

These fields already represent the information a user needs to provide when creating a task.

Notice the important relationship:

task status → matching column data-status

For example, a task whose status is progress should eventually be rendered inside the column whose data-status is progress.

Checkpoint

Point to the DOM element representing each of the three columns and identify the .tasks element that will hold that column’s cards.