First App.
Your learning space A little progress, every day
CHAPTER 04Lesson 12 of 20

Make buttons, forms and saved lists work

A page becomes a useful app when its controls do the job they promise. Start with one complete action.

In your browser and AI helper10 min read & do
By the end of this lesson

Build a working interaction and decide whether its information needs to survive a reload.

Let’s do this

  1. 1
    In your AI helper

    Describe the action from start to finish

    For Little Garden: type Basil, press Add plant, see Basil once in the list, then mark it as watered. Ask for a clear message if the input is empty. A business site can start with a contact link that opens the visitor’s email app.

  2. 2
    In your browser

    Test the awkward cases

    Try an empty name, a long name, pressing Enter and clicking twice. Make sure the form has a visible label, the button says what it does, and the result appears where you expect. Ask the AI to fix one problem at a time.

  3. 3
    In your AI helper

    Use browser storage only when it fits

    For a personal practice list, ask it to save in this browser. The storage is called localStorage. Reload and check the list stays. A different device or browser gets a different list, and clearing browser data can delete it. Use sample information here.

    MDN: browser storage (opens a new tab)
  4. 4
    In your AI helper

    Do not pretend a form sends something

    A success message alone does not deliver an email or save to an online database. For a simple site, use a working email link. For real submissions or shared lists, take the extra data lessons and test the receiving end.

    MDN: sending form data (opens a new tab)

A message for your AI helper

For my first website, make this action work end to end: [describe the action and expected result]. Handle empty input and repeated clicks. If the information only needs to stay in this browser, use localStorage and explain its limits. Do not show “sent” or “saved online” unless a real service confirms it. Tell me how to test the result and what happens after reload.

Make this message fit your idea.

What you should see

You can carry out one useful task, and you know exactly where any saved information lives.

If you get stuck

Go at your own pace. There is no test to pass.

Checked 7 September 2026. Screens can change; the official guides below have the latest steps.

MDN: browser storageMDN: sending form datashadcn/ui: introduction