Ask AI to make a clickable checklist For packing, reading, or simple event tools, start by asking AI for a small working version. What you will make Get a downloadable checklist webpage that opens, checks items, and resets. Example result Text illustration: ☑ Download tickets ☑ Confirm meeting location ☐ Bring a water bottle 2/3 completed; uncheck one for 1/3, reset for 0/3. This is a prepared example. Your AI may use different wording. Follow along Work in your own AI tool Practice material Fictional checklist: title 'Before departure'; tasks in order: 'Download tickets', 'Confirm meeting location', 'Bring a water bottle'. No network or progress saving; reopening starts at 0/3. Request for AI Make a complete HTML checklist for these three tasks, with CSS and JavaScript in the same file and no external libraries or network. Each task can be checked. Show n/3 completed and a reset button. Support phones and keyboards. Do not save progress: reopening clears it to 0/3, and the page must say so. Give me the complete code without omissions. 1. Paste the Practice material and Request for AI into your AI tool to get complete HTML code. 2. Copy the code into this page’s Complete HTML code field without the surrounding triple backticks. Select Update isolated preview. 3. In the preview, check two items, uncheck one, then reset. Counts should be 2/3, 1/3, and 0/3. 4. Select Download this HTML. Open the file from your browser downloads and check that reopening starts at 0/3. 5. In the same AI chat send: “Change only Bring a water bottle to Bring a notebook; give me complete updated HTML.” Paste the new code into the workspace, update the preview, and test checking, unchecking, and reset again. 6. Select Download this HTML again and save the new version as departure-v2.html, keeping the first version. Reopen the new file and confirm the third task is Bring a notebook and the initial count is 0/3. After trying: compare a possible result You get an HTML file that opens in your browser: three checkable tasks, a count that updates, and reset and reopening both return to 0/3. The new version replaces Bring a water bottle with Bring a notebook. Colors and layout may vary; what matters is that you can use it. Check these parts of your result Check two for 2/3, uncheck one for 1/3, reset for 0/3. Reopening starts at 0/3; this exercise does not save progress. The revised version changes only the third task to Bring a notebook; counting still works. Keep the first version, save departure-v2.html separately, and reopen it to check the initial 0/3. Try a different situation yourself New fictional checklist: 'Reading preparation', with 'Choose an article' and 'Write three questions'. Write your own request for another HTML file without progress saving, save study.html, and test checking, unchecking, reset, and reopening. Initial 0/2; both checked 2/2; uncheck one 1/2; reset 0/2; reopen 0/2. Provide your own request and actual generated file. Task labels must not become explanatory paragraphs. Try a more involved task Add search without changing the counting scope. First paste your completed full HTML. If you do not have a file, complete the guided task first. Confirm the current complete version in the same AI chat before submitting the new requirement; do not assume AI can see your local file. Three fictional tasks: Download tickets, Confirm meeting location, Bring a notebook. Search changes visibility only; the count includes all three tasks. Reset clears every checkbox and the search. Add text search to my complete HTML using these rules. Preserve existing features and no progress saving. List test expectations first, then provide the complete file. Check Download tickets and Bring a notebook: 2/3. Search 'tickets': only one item is visible, count remains 2/3. Uncheck it: 1/3. Clear search: Bring a notebook is still checked. Reset: all three visible and 0/3. Save your work and continue later Save the AI response in your own notes and add one sentence about what you changed. You can also use the optional record below.