Popcorn Hack: Fill in the Blanks

1. The checkbox inside a toggle remembers whether the switch is on or off.
2. The slider is the visible track that changes color once the toggle is on.
3. The .switch class sets the toggle’s position, size, padding, and alignment.
4. The border-radius property gives the slider its rounded edges.
5. The &:before rule draws the white circle (the knob) of the toggle.

Homework Hack: Interactive Settings Panel

Three labeled OCS toggles each control a real feature on the page, and a status line reports how many toggles are currently on.

Challenge

Homework Hack — Interactive Toggle Settings

Lines: 1 Characters: 0

UI Output