JavaScriptHTML + CSS + JavaScript
Draft saved locallyJavaScript · Spaces: 2
Live preview move your pointer inside
Mission 01 11 min
Reward+120 XP

Let JavaScript Turn a Style On

CSS already contains a .face.happy rule. JavaScript can activate it by adding the happy class.

face.classList.add("happy");

This keeps a useful separation:

  • CSS decides what happy looks like.
  • JavaScript decides when happy applies.

Learn more

01
Your mission

Add the happy CSS class when the HAPPY button is clicked.

  • Select #face into const face.
  • Select #happy-button into const happyButton.
  • Create makeHappy() and call face.classList.add("happy") inside it.
  • Attach makeHappy to the button click.
Check my work Run project
Mission demoLet JavaScript Turn a Style On

Finished result only — the answer code stays hidden.