Build with AI: From Zero to Your First App · Module 5: Turn a page into an app · Lab
Persistent Order List With Limits Line
40 min hands-on · Core
Browser only. Build the load/save/delete trio on a bakery order list with the honest limits line; no account anywhere.
Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.
Objectives
- Render entries from storage on load with empty-list handling
- Save on every successful submit and re-save on delete
- Show the limits line and survive corrupt stored data gracefully
Step 1
Wire load, save and delete
Three functions sharing one key: load on start (missing key means empty list), append plus save on validated submit, remove plus re-save on delete. Render the list after every change.
list-spec.mdmarkdown LIST SPEC (practice) Entry: name, items, pickup time. Key: one shared name e.g. bakery-orders. Limits line near the list: 'Saved in this browser on this device.'Step 2
Reload and corrupt
Reload mid-day and confirm orders stand. Then corrupt the stored text once (edit or clear it) and reload: the page must show an empty list with a note, never a crash.
Step 3
Add delete from day one
Every entry gets a delete control that removes and re-saves. Confirm a mistaken entry can be removed without clearing the whole list.
How to confirm it worked
- Load on start, save on change, delete with re-save all working
- Limits line visible near the list
- Reload persistence confirmed
- Corrupt-data load graceful with a note, recorded
Try it here
0/3 checks passing · Coverage only, not a quality score.
The starter project is loaded below. Edit, preview with Run, then run the behaviour checks. No account needed; your draft stays in this browser.
Up to 10 files, .html/.css/.js only, 100 KB each. A failed import never touches your draft.
Draft kept in this browser.
Hints, in three stages
Stage 1: a nudge
Missing key is normal (first visit), not an error. Empty list, no message needed.
Stage 2: a direction
Unparseable stored text means empty list plus a note. Wrong-shaped entries are skipped, never crashing.
Stage 3: almost the answer
Delete is not a stretch goal. Lists without delete rot from the first mistake.
Worked solution (open after an honest attempt)
Worked solution. Load reads the key or starts empty; submit validates, appends, saves, re-renders; delete removes and re-saves. Limits line: 'Saved in this browser on this device.' Corrupt-data test: storage edited to garbage, reload shows empty list with a note. Mistake entry deleted singly, rest intact.