Popcorn Hack: Fill in the Blanks

  1. The checkbox on a toggle keeps track of whether it is on or off.
  2. The slider is the visible part of the toggle that changes color when it is turned on.
  3. The .switch class controls the toggle’s position, size, padding, and alignment.
  4. The border-radius property makes the slider have rounded edges.
  5. The &:before class dictates the white circle of the toggle.

Challenge: Find the Bug

The toggle was missing its track class, so there was nothing visible to click. Adding ocs__toggle-track to the empty span fixes it. Click Run to see “Toggle works! 🎉”.

Challenge

Challenge - Find the Bug

Lines: 1 Characters: 0
UI Output

Challenge: Customize the Toggle

I changed the checked color from green (#22C55E) to purple (#8B5CF6). Click Run, then flip the toggle to see the new color.

Challenge

Challenge - Customize the Toggle

Lines: 1 Characters: 0
UI Output

Homework: Study Session Settings

Click Run in the UI runner, then flip the switches. This panel has 4 toggles built with the ocs__toggle SASS classes, and each one controls a real feature:

  • Night Mode changes the panel’s colors.
  • Show Study Tip shows or hides a study tip.
  • Large Text makes the panel’s text bigger.
  • Focus Mode hides the distractions section.

A live counter shows how many toggles are on, and a bonus message appears when all four are on. The comments in the code explain how each part works.

Challenge

Homework - Study Session Settings

Lines: 1 Characters: 0
UI Output

How It Works

The hidden checkbox inside each ocs__toggle stores the on/off state, and the SASS :checked styling changes how the switch looks. JavaScript reads that same state with .checked, which is a true/false value, and uses it as the condition for each feature. This is selection from AP CSP: the program chooses which behavior to run based on whether a condition is true. One shared updatePage() function handles every toggle, so adding another toggle only takes one more line of HTML.