JavaScript lesson · 32 min

JavaScript Browser Mini Project

Combine DOM selection, events, validation, and localStorage into one small browser feature.

Code runs locally in your browser

What you will practice

Build a tiny interactive preference form.
Validate and save user choices.
Render saved state back into the DOM.

What this means

A useful browser feature is usually a combination of smaller ideas: read DOM elements, listen for events, validate input, save state, and update the page.

This lesson ties together the previous DOM and storage lessons in one small example.

The important beginner habit is to keep steps clear instead of hiding everything inside one long function.

If this is your first time seeing this

A mini project combines several small ideas into one feature.

This is where JavaScript starts feeling like real interface work.

Mini glossary

Render: Update what the user sees on the page.
State: The current data the interface is based on.
Preference: A user choice that the interface can remember.

Example from everyday life

A mini project is like assembling a simple desk from parts. The legs, screws, and tabletop are separate ideas, but the useful thing appears when they are connected in the right order.

How it works step by step

The example creates a form with a display name and theme select.
The submit handler trims the name and validates that it is not empty.
Valid preferences are saved with localStorage.
`renderProfile` reads the saved data and updates the visible status text.

Where you will use this

A settings panel saves a preferred theme.
A learning app stores a display name for local progress.
A tool page remembers the last selected mode.

Before you run the code

Small projects are where syntax starts becoming real skill. You are no longer learning isolated words; you are forming sentences.

In production, this kind of local state is useful for preferences, but account-level data should be saved on a server too.

Common beginner mistakes

Doing validation, saving, and rendering in one giant unreadable block.
Saving data before checking whether it is valid.
Forgetting to update the visible page after saving state.

JavaScript editor

document.body.innerHTML = `
  <form id="prefs">
    <input name="displayName" value=" Mira ">
    <select name="theme">
      <option value="light">Light</option>
      <option value="dark" selected>Dark</option>
    </select>
  </form>
  <p id="status">No preferences yet</p>
`;

const form = document.querySelector("#prefs");
const status = document.querySelector("#status");

function renderProfile() {
  const saved = JSON.parse(localStorage.getItem("lumio-profile"));
  status.textContent = `${saved.displayName} prefers ${saved.theme} mode`;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const data = new FormData(form);
  const displayName = String(data.get("displayName")).trim();
  const theme = String(data.get("theme"));

  if (displayName.length === 0) {
    status.textContent = "Display name is required";
    return;
  }

  localStorage.setItem("lumio-profile", JSON.stringify({ displayName, theme }));
  renderProfile();
});

form.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }));

console.log(status.textContent);
console.log(localStorage.getItem("lumio-profile"));

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingRenders saved preferences into the page

WaitingSaves structured profile data

Code runs locally in an isolated sandboxed browser frame with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Change the default theme to `light`.
Make the display name empty and check the error path.
Add one more field and include it in the saved profile.

Previous lesson Next lesson