Review the State and UI Flow

Open app.js and trace the application from startup to a user action.

You should be able to point to:

where tasks is declared
where saved tasks are loaded
where renderTasks() starts rebuilding the board
where the task form adds a task
where deletion changes the array
where drag-and-drop changes status
where saveTasks() stores the latest state

Then explain the central rule in your own words:

text

state is the source of truth
        ↓
render the UI from state

The DOM displays the current state, but the task array is what the application actually manages.

This is the most important architectural idea from the project. If you understand this flow, the individual event listeners become much easier to reason about.

Checkpoint

Pick one action—create, delete, or move—and explain its complete path from the user’s click or drag to the updated card on screen.