Students switch CSS classes with classList.toggle, add and remove, hide and show a tip with a hidden class, fix a classList call written with a dot, and make a themed page of their own.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 15 min
Read the unit primer first. This ties the CSS lessons to JavaScript: the look is in <style>, the script only flips a class. classList.toggle("dark") on document.body applies a rule to the whole page. The classic slip is classList.toggle(".dark"): no error, no change. The bug task is a logic bug, so students must click the button and notice nothing happens. Hiding with a .hidden { display: none } class is the pattern behind menus, tabs and tips; make the link to "display" from the CSS course.
The dot: the CSS rule is .dark but the class name is dark. The page does nothing and says nothing.
| What you will see | A question to ask | The fix |
|---|---|---|
| Clicking does nothing and there is no error. | Does the class name in classList have a dot? | Remove the dot: toggle("dark"). |
| The class is added but nothing changes. | Does the CSS have a rule for exactly that class name? | Check the spelling of the rule and the class. |
| Cannot read properties of null. | Does the id in the selector match the HTML? | Match the id, with a #. |
| It changes the wrong thing. | Which element did you call classList on? | Check the selector, and use document.body for the whole page. |
One possible solution for each task. Other correct programs are fine.
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.dark { background: midnightblue; color: white; }
.hidden { display: none; }
.big { font-size: 48px; }
</style>
<h1 id="heading">Night mode</h1>
<button id="theme">Switch theme</button>
<button id="tip-button">Show tip</button>
<button id="size">Bigger heading</button>
<p id="tip" class="hidden">Tip: dark pages are easier on the eyes at night.</p>
<script>
document.querySelector("#theme").addEventListener("click", function () {
document.body.classList.toggle("dark");
});
document.querySelector("#tip-button").addEventListener("click", function () {
document.querySelector("#tip").classList.toggle("hidden");
});
document.querySelector("#size").addEventListener("click", function () {
document.querySelector("#heading").classList.toggle("big");
});
</script>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.dark { background: midnightblue; color: white; }
.hidden { display: none; }
.big { font-size: 48px; }
</style>
<h1>Night mode</h1>
<button id="light">Light</button>
<button id="night">Dark</button>
<script>
document.querySelector("#light").addEventListener("click", function () {
document.body.classList.remove("dark");
});
document.querySelector("#night").addEventListener("click", function () {
document.body.classList.add("dark");
});
</script>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; background: lightyellow; }
.ocean { background: navy; color: white; }
.spaced { letter-spacing: 4px; }
.card { padding: 12px; border: 2px solid teal; border-radius: 12px; }
.hidden { display: none; }
</style>
<h1 class="card">My themes</h1>
<button id="theme">Ocean theme</button>
<button id="space">Spaced letters</button>
<button id="more">Show more</button>
<p id="extra" class="hidden">Everything here is switched with classList.</p>
<script>
document.querySelector("#theme").addEventListener("click", function () {
document.body.classList.toggle("ocean");
});
document.querySelector("#space").addEventListener("click", function () {
document.querySelector("h1").classList.toggle("spaced");
});
document.querySelector("#more").addEventListener("click", function () {
document.querySelector("#extra").classList.toggle("hidden");
});
</script>
Stretch: Remember the theme with a second class for each choice, or make a button that cycles through three themes using a variable.
Support: Give the CSS classes ready-made and ask students to write only the buttons and listeners.
Why does classList.toggle("dark") have no dot?
classList takes the class name, not a CSS selector: the dot is only for CSS rules and querySelector.
Next lesson: inputs, reading what someone types.