I Know What I Need, But I Don't Know How To Build It
Pick the thing you need. Then derive it: meaning, state, operations, rules, examples, representation, pseudocode — and only then the code, one rung at a time.
“I know I need a shopping cart. I have no idea how to implement a shopping cart.” The gap is not a missing tutorial; it is a missing method. Every stage below asks you to write before it shows you anything, because the code is the last step of a derivation, not the first thing to search for.
Which concept?
Grouped by exercise level; the level is how far the derivation goes, not how hard the code is.
How much help?
Every stage's content is shown right after your attempt box.
Todo List — twelve stages
I need a todo list. Add a task, tick it off, remove it. I do not know how to keep the tasks or find one again.
Define the concept
In one sentence, without any code: what is it? Then answer for yourself — does it have identity, who owns it, how long does it exist, should it survive a reload or a login?
Todo List = A collection of tasks, each of which is either open or done, that the user adds to, ticks off, renames, removes and looks through.
- Does a todo have identity? Yes. Two todos titled "Buy milk" are two todos; ticking one must not tick the other. Titles are not identity — they repeat and they change — so each todo needs an id the moment it can be referred to again, which is the moment it exists.
- Does the list have identity? Weakly. V0 has one list and the variable is its identity. A second list ("Work", "Home") or a second user gives the list an id and an owner.
- Who owns it? One person in V0 through V3. The owner becomes state when a second person can see the list, and becomes a rule ("only members may edit") when the list is shared (V4).
- How long does it exist? A todo lives from add until remove; ticking it off does not end it, it changes it. The list lives as long as the person wants it — which is longer than the page, so persistence arrives early.
- Should it survive reload? A todo list that forgets on refresh is not a todo list. V1 in memory says no and is only a step; V2 browser storage is the first version a person could use.
- Should it survive login? Only once there is a login. Then the list follows the user across devices (V3) and the browser copy becomes a cache.
The catalog is one derivation, not the only one (impl §60). A different set of examples yields different rules; a different first requirement yields a different V1; a map instead of an array is not wrong, only an answer to a different question. Compare your derivation with the reference for the differences, then decide which ones were rules and which were style.
Take it further
The flagship exercise: the cart typed by you, with the reference hidden until you ask.
Make It Smaller Until You Know How to Build It →The principle behind the ladder, and the primitive chain it produces.
The Implementation Loop →The loop the twelve stages follow, and why the code is last.