← Menu

Lesson 4.7 · Flip the Class

Four tiny apps. One stretch game. Three new tools.

Click a card to open the worked version of each challenge.

C1

Red Mode

Two buttons flip every bit of text on the page between black and red — a class-flip theme toggle.

classList.add · classList.remove C2

The Great Box Popper

Ten numbered boxes, ten numbered buttons. Each button vanishes its matching box.

classList.add · display: none C3

Pop and Reappear

Pop a box, the red button hides and a green RETURN appears. Both reverse on click.

two-way classList toggle C4

Choose Your Style

A three-question quiz that flips the palette, swaps the image, and rewrites the caption.

classList · .src · .textContent · localStorage

━━ Level 2 — Stretch ━━

L2 · Game

Hide and Seek

Pick a buddy. They hide in one of ten numbered boxes. Find them in as few clicks as you can — best score sticks across visits.

all L1 patterns + Math.random + persistent localStorage
L2 · Extension

Make It Your Own

Pick one of two extensions to add to Hide and Seek — track winning streaks, or add difficulty modes with separate best scores per mode.

existing toolbox only · no new tools
RocketHour · Core-1L4.7 ?c=N to route