All three projects use the same big idea, so let's understand it first. It's the most important idea in modern front-end development, and it's the core of how frameworks like React work.
In Grades 11 and 12, we often changed the page directly: "find this element and change its text," "add a new <li> here," "remove that one." That's fine for small things. But in a bigger app, it gets messy fast. The page ends up being the only record of what's going on, and keeping it in sync becomes a nightmare. ("Did I update the counter when I deleted that item? And the filter buttons? And did I save it?")
Instead, we'll follow this pattern:
- Keep all the important information in JavaScript variables: the state. For a to-do app, the state is the array of tasks. The state is the single source of truth.
- Write a
render()function that builds the page completely from the state. It wipes the old content and draws everything fresh. - Whenever the user does something, change the state and then call
render()again.
Think of a football stadium scoreboard. The real score is kept by the official in their notebook: that's the state. The giant scoreboard just displays whatever's in the notebook: that's render. When someone scores, the official updates the notebook, and the scoreboard is refreshed from it. Nobody climbs up a ladder and changes the scoreboard numbers by hand. If they did, the scoreboard and the notebook could disagree, and then there'd be a riot.
The beauty of this pattern is that you never have to remember which bits of the page to update. You just update the data, call render(), and the page is always correct.