RocketHour · Lesson 4.7 tutor demo

How `classList` works

Click any button on the right. Watch four things happen at once. That cause-chain is the whole new idea in this lesson.

The subject

The Subject

↑ the subject is hidden because it has the hidden class. Remove it to bring it back.

HTML the element & its class list

<h2 id="subject"
   class="">
  The Subject
</h2>

Each chip is a class on the element. Solid = currently on. Faint = not on.

CSS rules that match (or don't)

.red {
  color: #d62828;
}

.big {
  font-size: 96px;
}

.hidden {
  display: none;
}

A rule lights up only when its class is on the element.

JS click a button — its line runs

Each button = one line of JavaScript, exactly as a student would write it.

The whole new idea, in one sentence

A click runs a line of JS → that line changes which classes are on the element → whichever CSS rules match those classes apply → the page looks different.

The lesson's real code uses two-class layers (.theme as a base, .red-text as an override) so that later rules win over earlier ones. The mechanism is identical to what you see here.