Mini build: a packing list
Build a packing list from three components that share state through their parent, App: a form AddItem, a list PackingList, and a summary Stats.
Start with three items: Passport and Charger (not packed) and Toothbrush (packed). Each item is an <li> containing a checkbox (packed or not), its name, and a .delete button.
The form has an input #new and a submit button. Submitting adds the typed name as an unpacked item and clears the input. Empty names are ignored.
#stats shows Packed X of Y, always correct. A checkbox #hide-packed hides packed items from the list (but #stats still counts every item).
Store the items once, in App. Don't store the counts or the visible list: derive them.
What Check tests
- Three items are listed and
#statssaysPacked 1 of 3 - Adding
Umbrellalists it, updates the stats and clears the input - An empty name is ignored
- Ticking Passport gives
Packed 2 of 4 - Hide packed shows only Charger and Umbrella; stats still count all
- Deleting Charger gives
Packed 2 of 3
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.