# 04. Turn a page into a working webapp. Build a checklist that adds, completes and removes tasks. ## Facilitator preflight Bring laptops, internet, a projector and these local course files. Check tool access before the meetup. Keep samples free of personal information. Quick win: Add a task and mark it complete in your own app. Prerequisites: Module 03. Keep a backup of working HTML. ### Tools and cost notes - **AI chat, editor, browser; localhost server for reliable storage tests.**: Prepared before the meetup.. Local JavaScript needs no API or backend. Storage stays in this browser. ## Run of show | Slide | Minutes | Activity | |---|---:|---| | 1 | 3 | Turn a page into a working webapp. | | 2 | 3 | Before you start. | | 3 | 5 | Your first small win. | | 4 | 3 | What happens between input and output? | | 5 | 3 | Step 01. Start a new app folder. | | 6 | 3 | Step 02. Try three actions. | | 7 | 3 | Step 03. Add persistence. | | 8 | 3 | Step 04. Serve it locally. | | 9 | 3 | Step 05. Test state and reload. | | 10 | 3 | Step 06. Keep the scope small. | | 11 | 4 | Make the working version. | | 12 | 4 | Ask for a review. Then check it. | | 13 | 6 | Prove your result works. | | 14 | 4 | When it does not work yet. | | 15 | 5 | Choose your next challenge. | | 16 | 3 | Keep the result. Keep the evidence. | | 17 | 2 | Sources you can check. | Total: 60 minutes. ## 1. Turn a page into a working webapp. 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. ## 2. Before you start. 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. ## 3. Your first small win. 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. Copyable prompt: [Open prompt](index.html#04-quick-win) ```text 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. ``` ## 4. What happens between input and output? Ask a learner to explain each stage in their own words. This is a teaching model, not a promise that all tools behave identically. ## 5. Step 01. Start a new app folder. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 6. Step 02. Try three actions. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 7. Step 03. Add persistence. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 8. Step 04. Serve it locally. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 9. Step 05. Test state and reload. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 10. Step 06. Keep the scope small. Perform these numbered actions on the laptop. Pause after the step and inspect the result. Use fictional or approved material. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## 11. Make the working version. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#04-build) ```text 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]. ``` ## 12. Ask for a review. Then check it. Use fictional practice inputs. Ask learners to show their work, not just the final answer. Copyable prompt: [Open prompt](index.html#04-review) ```text 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]. ``` ## 13. Prove your result works. 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. ## 14. When it does not work yet. 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. ## 15. Choose your next challenge. Experienced learners use the extensions while beginners complete the same core outcome. An extension is optional, not a prerequisite for participating. ## 16. Keep the result. Keep the evidence. 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. ## 17. Sources you can check. 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. Source: [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) Source: [MDN: Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) ## Extensions - Add filtering and an undo action. - Build a different tool with the same state pattern. ## Delivery notes Arrow keys, Space, Home and End navigate slides. N opens notes. Read all slides creates a scrolling lesson. Every prompt has a real Copy prompt button with an honest manual fallback if the browser blocks clipboard access. Keep the whole curriculum folder together: PPTX prompt links open the companion index.html at the same prompt anchor. PowerPoint does not copy directly. For sharing online, rebuild with --companion-base-url set to the published curriculum URL. Motion illustrates input, agent, tool, human review and output. Pause flow stops it; system reduced-motion is respected. PDF contains a static diagram. PPTX uses an animated GIF where available; playback varies by viewer. Original teaching content, synthesized from learning objectives. Public source decks remain separate in library/. No one-to-one rebranding or permission to republish is implied.