Unit project: make your page interactive

Same About Me page as Unit 2's finish — same HTML, same CSS. Every wire you've learned to run through this unit gets used on it now, for real.

What you're building

Two features, wired onto the page below:

• A theme toggle. A button that switches the whole page between its normal look and a dark one, by adding and removing a class — flip it again, and it switches back.
• A greeting. A name field and a button. Type a name, click the button, and a heading on the page greets that exact name.

Nothing about the HTML or CSS needs to change — both features are pure JavaScript, reaching into a page you already built.

Where to start

Grab the elements you need first, with document.querySelector, before you try to do anything to them. Then wire one addEventListener("click", ...) for the toggle, and a second for the greeting. Test each button in the preview as you go, rather than writing both before checking either. The lab has the page, wired to nothing yet.

This is the biggest exercise in the unit

The same rules as always: infinite attempts, a hint after two failed runs, the full solution after three.

What comes next

Every concept in this unit — in this whole course — is checkpointed somewhere by the time this passes. The page in front of you isn't a practice file anymore: it's structure, style, and behavior, all three, built by you.