SASS Toggles: Solved Runners

Every runner from the lesson, solved with the OCS toggle classes, plus the lesson’s allowed color override.

1. Toggle Example

A single toggle using the base ocs__toggle grammar.

View example code 
<label class="ocs__toggle ocs__toggle--green">
  <input id="toggle-single" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">It's a toggle!!!</span>
</label>

2. Risk Check Toggles

Four toggles and an OCS button that adds 25% for every checked box.

View example code 
<div id="risk-check">
  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle1" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you have family members who have or have had cancer?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle2" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you consume alcohol or use tobacco?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle3" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you forget to wear sunscreen?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle4" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you consume less than 48 oz of water and 30 grams of fiber a day?</span>
  </label>

  <br>

  <button id="checkRisk" class="ocs__btn accent fill">Check Risk</button>

  <p id="riskOutput"></p>
</div>


<script>
  document.getElementById("checkRisk").addEventListener("click", function () {
    let risk = 0;

    document.querySelectorAll("#risk-check .ocs__toggle-input").forEach(function (toggle) {
      if (toggle.checked) {
        risk += 25;
      }
    });

    document.getElementById("riskOutput").textContent =
      "Current Cancer Exposure Risk: " + risk + "%";
  });
</script>

3. Find the Bug

Fix: the track <span> was missing ocs__toggle-track.

View example code 
<div id="bug-output">
  <label class="ocs__toggle ocs__toggle--green">
    <input id="bug-toggle" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Enable Notifications</span>
  </label>
  <p id="bug-result" class="ocs__callout"></p>
</div>

<script>
  const bugTrack = document.querySelector("#bug-output .ocs__toggle-track");
  document.getElementById("bug-result").textContent =
    bugTrack ? "Toggle works! 🎉" : "Incorrect, almost there!";
</script>

4. Customize the Toggle

Changed the checked-state color from green (#22C55E) to blue (#3B82F6) with the lesson’s color override.

View example code 
<style>
.custom .ocs__toggle-input:checked + .ocs__toggle-track {
  background: #3B82F6;
}
</style>

<div class="custom">
  <label class="ocs__toggle">
    <input class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">My Custom Toggle</span>
  </label>
</div>

5. Homework: Toggle Dashboard

Three toggles each show or hide a panel, and the counter updates on every flip.

View example code 
<div class="ocs__card">
  <h3 class="ocs__section-title">My Study Dashboard</h3>

  <!-- Toggle 1: shows or hides a study tip -->
  <label class="ocs__toggle ocs__toggle--green">
    <input id="hw-tip-toggle" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Show Study Tip</span>
  </label>
  <p id="hw-tip" class="ocs__callout" hidden>Review your notes for 10 minutes before starting homework.</p>

  <!-- Toggle 2: shows or hides the resource list -->
  <label class="ocs__toggle ocs__toggle--green">
    <input id="hw-resource-toggle" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Show Resources</span>
  </label>
  <p id="hw-resource" class="ocs__callout" hidden>AP CSP reference sheet, OCS SASS guide, and your lesson notebook.</p>

  <!-- Toggle 3: shows or hides a reminder -->
  <label class="ocs__toggle ocs__toggle--green">
    <input id="hw-reminder-toggle" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Show Reminder</span>
  </label>
  <p id="hw-reminder" class="ocs__callout" hidden>Push your notebook before the end of class.</p>

  <p class="ocs__description"><strong>Toggles on:</strong> <output id="hw-count">0</output> of 3</p>
</div>


<script>
  // .checked is a Boolean that tells JavaScript whether a toggle is on.
  const tipToggle = document.getElementById("hw-tip-toggle");
  const resourceToggle = document.getElementById("hw-resource-toggle");
  const reminderToggle = document.getElementById("hw-reminder-toggle");
  const allToggles = [tipToggle, resourceToggle, reminderToggle];

  function updateDashboard() {
    // hidden is also a Boolean, so ! flips it to match the toggle state.
    document.getElementById("hw-tip").hidden = !tipToggle.checked;
    document.getElementById("hw-resource").hidden = !resourceToggle.checked;
    document.getElementById("hw-reminder").hidden = !reminderToggle.checked;

    // Loop over the toggles and add one for every checked box.
    let on = 0;
    allToggles.forEach(function (toggle) {
      if (toggle.checked) {
        on++;
      }
    });
    document.getElementById("hw-count").textContent = on;
  }

  // The same function handles every toggle, so the counter never falls behind.
  allToggles.forEach(function (toggle) {
    toggle.addEventListener("change", updateDashboard);
  });

  updateDashboard();
</script>

My Study Dashboard

Toggles on: 0 of 3