Build a checklist that adds, completes and removes tasks.
Build one thingCheck it worksChoose an extension
Module 04 / Build together
Before you start.
01
You already know
Module 03. Keep a backup of working HTML.
02
Open these tools
AI chat, editor, browser; localhost server for reliable storage tests.
03
Check the requirement
Local JavaScript needs no API or backend. Storage stays in this browser.
Module 04 / Build together
Your first small win.
Create a complete single-file HTML task checklist. Add a task, mark it done and delete it. Use crimson, ink and near-white. Start empty. No network requests, accounts or libraries. Include labels and keyboard controls. Return code only.
Module 04 / Build together
What happens between input and output?
1An input changes application state.
2JavaScript updates the view and handles actions.
3Local storage is not shared or secure cloud storage.
Module 04 / Build together
Step 01. Start a new app folder.
1Create my-checklist-app.
2Generate the quick-win code.
3Save it as index.html and open it.
Module 04 / Build together
Step 02. Try three actions.
1Add the fictional task Buy pens.
2Mark it complete.
3Delete it and check the list is empty.
Module 04 / Build together
Step 03. Add persistence.
1Use the build prompt for localStorage.
2Save a backup before replacing code.
3Ask for an Export JSON and Clear data control.
Module 04 / Build together
Step 04. Serve it locally.
1With Python installed, run python3 -m http.server 8000 in the folder.
2On Windows, py -m http.server 8000 is an alternative.
3Open http://localhost:8000 rather than the file URL.
Module 04 / Build together
Step 05. Test state and reload.
1Add two tasks and reload.
2Export the list, then clear it.
3Confirm the cleared state remains after another reload.
Module 04 / Build together
Step 06. Keep the scope small.
1Use fictional task text.
2Do not add API keys to browser code.
3Explain that another browser has a different local list.
Module 04 / Build together
Make the working version.
Add localStorage persistence, Export JSON and Clear data to my checklist. Treat typed text as text, not HTML. Handle empty inputs and damaged stored JSON. No API keys or network calls. Explain how to test on localhost. Code: [paste].
Module 04 / Build together
Ask for a review. Then check it.
Review this checklist code for unsafe HTML insertion, missing labels, empty input handling and persistence failures. Give manual tests, not claimed results. Keep the app offline and single-file. Code: [paste].
Module 04 / Build together
Prove your result works.
1Add, complete and delete work.
2Reload keeps state on localhost.
3Export and clear work; typed markup is displayed as text.
Module 04 / Build together
When it does not work yet.
01
Storage differs by URL
Use the same localhost address and port.
02
A revision broke it
Restore the backup, then change one feature.
Module 04 / Build together
Choose your next challenge.
01
Core complete
Show one checked output to a partner.
02
Extension 1
Add filtering and an undo action.
03
Extension 2
Build a different tool with the same state pattern.
Module 04 / Build together
Keep the result. Keep the evidence.
Build a checklist that adds, completes and removes tasks.
Save your filesSave your promptName the next change
Module 04 / Build together
Sources you can check.
01
MDN
localStorage
02
MDN
Your first website
Turn a page into a working webapp.
3 minutes
Outcome: Build a checklist that adds, completes and removes tasks. This is a 60-minute in-person laptop session after preflight. No setup-duration guarantee. Core first, extensions second.
References
Before you start.
3 minutes
Local JavaScript needs no API or backend. Storage stays in this browser. The facilitator verifies accounts, installed tools and model/host connections before the session. Pair up if setup is incomplete. Do not create accounts or incur costs without understanding the provider terms.
References
Your first small win.
5 minutes
Quick win: Add a task and mark it complete in your own app. Aim for a visible result in the first 15 minutes after preflight. Explain that generated code/output is untested until the learner checks it. If tools are unavailable, inspect the prepared example with a partner.
References
What happens between input and output?
3 minutes
Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically.
References
Step 01. Start a new app folder.
3 minutes
Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material.
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Ask for a review. Then check it.
4 minutes
Use fictional practice inputs. Ask learners to show their work, not just the final answer.
References
Prove your result works.
6 minutes
These are manual acceptance tests for the learner to perform. No test is claimed to have run merely because it appears here. Ask pairs to demonstrate one pass and one corrected failure.
References
When it does not work yet.
4 minutes
Choose the observed symptom. Change one thing and rerun the smallest test. Avoid restarting the whole project or adding tools before diagnosing the current step.
References
Choose your next challenge.
5 minutes
Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating.
References
Keep the result. Keep the evidence.
3 minutes
Save the working version before leaving. Add a short note: what worked, what needed correction and what you would try next. The next module builds on the saved output.
References
Sources you can check.
2 minutes
Primary sources checked during course creation on 2026-10-08. Provider interfaces and availability can change. The examples, prompts and activities are original community teaching designs. Source links explain capabilities; they do not prove these fictional exercises were executed.
