3.09 · Lab

Unit project: make your page interactive

Structure, style, and now behavior — all three on the page you've carried through three units. Grab your elements first, wire one button at a time.

Final inspection

Checks itself — try as often as you like

Wire up two features on the About Me page below. Nothing in the HTML or CSS needs to change — every element and class you need is already there.

Theme toggle — select #theme-toggle, and add a "click" listener that toggles the class "dark-mode" on document.body.
Greeting — select #greet-button, and add a "click" listener that reads the current value of #visitor-name, and sets #greeting's textContent to "Hello, " + that value + "!".