SASS Toggles HW

Lesson: https://pages.opencodingsociety.com/sass/toggles

CSP link: a toggle is selection — its checked boolean drives conditional behavior (if (toggle.checked) ...), just like AP pseudocode selection.

Popcorn review — fill in the blanks (answers)

  1. checkbox — keeps track of on/off. 2. slider/track — visible part that changes color. 3. alignment (position/size/padding/alignment). 4. border-radius — rounded edges. 5. white circle (::before) — the knob.

Bug fix: the broken toggle was missing class="ocs__toggle-track" (+ aria-hidden="true" since it is decorative).

Challenge

Toggles Popcorn — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0
UI Output

Homework — 3 interactive toggles with live count + features

  • 3 toggles, each with own label/purpose, all on ocs__toggle grammar.
  • JS reads .checked to update a live count (aria-live) and drive real features: highlight section, show/hide study tips, compact mode.
  • 4+ insight comments included.

2 of 3 toggles on

Demo panel

Toggle the switches above — this panel highlights, collapses tips, and compacts.

Tip: .checked is a live boolean — flip a switch and the count + panel update instantly.

Challenge

Toggles Homework — edit the HTML and JavaScript below and press Run to preview it.

Lines: 1 Characters: 0
UI Output

Extra Credit (0.92) — Above and Beyond

The lesson rubric awards 0.92 for going above and beyond the base homework:

  • Insightful comments throughout the code — explain why something works, not just what it does. Example: “.checked is read inside the change handler, so the count never goes stale.”
  • Connect the toggle to a real feature — flipping the switch must actually change the page, not just its own appearance. Examples: dark mode, show/hide an image, open/close a menu, filter a list.

The example below earns the extra credit: one toggle drives dark mode across the whole panel, another reveals a hidden image, and the comments explain the reasoning behind each line. Copy the pattern into your own page to submit for the higher rubric band.

0 of 2 extra-credit toggles on

Extra credit panel

This whole section reacts to the toggles above — proof the switch controls a real feature.

Challenge

Toggles Extra Credit — flip the switches and edit the HTML/JavaScript below, then press Run.

Lines: 1 Characters: 0
UI Output