L15. Your first app: My Day

Create a page with three tasks, checkboxes and a completed-task counter. Allow about 45–60 minutes. You need the file-saving skills from lesson 12 and Examples_EN.zip. First, test the actions on your computer; saving selections and phone installation follow later.

Olena’s website displays text. An app also responds: you tick a task and a number changes. JavaScript, a programming language executed by the browser, controls that behaviour. HTML still defines the page elements, while CSS controls their appearance.

In class

The teacher will show how a checkbox updates the count. Together, we will test 0 → 1 → 2 → 1 → 0 and click a label instead of the small square.

Prepare the project

• Create my-day inside Documents\AI-practice. Our three tasks are “Read 10 pages”, “Go for a walk” and “Tidy the desk”. The list is fixed; this version has no task editor.
• Extract Examples_EN.zip using Extract All. To use the supplied example, copy the contents of its my-day folder into your own folder of that name. If creating code with AI, copy only icon-192.png and icon-512.png: these are ready-made icons for installation later.
• If you copied the complete supplied app, continue at step 5. To generate your own version, start a new AI conversation and send the prompt below. The prompt describes the whole app. A Boolean value means yes or no; localStorage holds selections in the browser, and a cache keeps file copies for offline use. Lessons 16–17 explain saving and installation.

> [PROMPT]

> Create a simple My Day app in English without libraries. Return complete index.html, styles.css, app.js, manifest.webmanifest and sw.js files in separate blocks. Three tasks: “Read 10 pages”, “Go for a walk”, “Tidy the desk”. Use native checkboxes with labels, a “Completed 0 of 3” counter and a “Start a new day” button that immediately unticks everything. Save three Boolean values to localStorage after changes; validate saved data when loading and show understandable errors. Disable saving for file: addresses and explain that this is a preview. Add offline caching of all seven files using a service worker, relative paths for GitHub Pages, and a standalone manifest. icon-192.png and icon-512.png already exist. Show offline readiness only after the cache is prepared. No automatic midnight reset, accounts, advertising or external requests. Explain where to save each file, without terminal commands.

• Save the five text files inside my-day using Notepad: Save as → All files → UTF-8, as in lesson 12. Do not add .txt. The two PNGs are images: copy them as files rather than pasting them into Notepad.

Your folder should contain index.html, styles.css, app.js, manifest.webmanifest, sw.js, icon-192.png and icon-512.png. The supplied ZIP also includes README.md with instructions; the browser does not need it. We will explain the manifest and service worker in lesson 17.

Try an action

• Double-click index.html. You should see “My Day”, three empty checkboxes and “Completed 0 of 3”. The supplied example also displays a file-preview message underneath.
• Click the first task’s text. Its checkbox should change and the counter should read “Completed 1 of 3”. Clicking the label is easier than aiming for a small square; HTML connects the two using a label element.
• Tick the third task: expect “Completed 2 of 3”. Click the first task again: one tick remains and the count becomes 1.
• Choose Start a new day. All ticks disappear and the counter returns to zero. The button acts immediately; this version has no history of previous days. To test the keyboard, press Tab until the first checkbox has an outline, then press Space. The checkbox should toggle and the counter should show 1.

[[VIS:b5_app_action]]

Clicking runs the JavaScript already created. It does not send a new AI request for each selection.

Find this line in the supplied index.html. It is an HTML fragment:

<script src="app.js" defer></script>

It connects the JavaScript file beside the HTML. defer tells the browser to run the code after reading the HTML, when the checkboxes already exist on the page.

> [FIX]

> Do the checkboxes change while the number stays at 0? Check the app.js filename and the HTML line above. Browsers can toggle a checkbox without JavaScript, but the counter needs the connected code. Save the correction and reload.

If clicking the label does not toggle the checkbox, send that HTML to the AI: “Check the label–checkbox connection. If it uses for, that value must match the checkbox id. Repair only this connection.” Save the corrected HTML and click the label again.

Home practice

• Copy my-day beside the original as my-day-label-home; add an unused number if needed. Open its index.html in Notepad.
• Change only the visible task text “Read 10 pages” to “Read 5 pages”. Keep the tags and filenames. Save and open the copy in a browser.
• Click the new label, then the new-day button. Create label-check.txt in the copy and record whether the count went from 0 to 1 and back. The main app should remain unchanged.

Self-test

• The first and third tasks are selected. You untick the first. What count should remain?
• A checkbox has keyboard focus. What should happen when you press Space?
• Does counting the selected tasks require a new AI request?

Terms

• JavaScript: the language controlling this page’s behaviour.
• State: current values, such as the three task selections.
• Event: an action the code responds to, such as a click or checkbox change.