SCSS

by Laura Kishimoto

HTML

<!-- 

  You can edit any of the HTML, CSS, or JS as you need.

  Challenges:
  * Submit the form:
    When a 'fake submit' button is clicked, log the name and the selected mode.
  * Show related content:
    checking a radio button should toggle the visibility of the related content.
  * Allow for deselection of radio buttons: 
    Clicking on a checked radio should uncheck it, unlike native radio buttons.
  * Make it accessible. 
    Can you navigate by keyboard only? Are the elements semantic?

-->

<form>
  <label>
    Name
    <input type="text">
  </label>
  <p>Please select your mode of travel:</p>
  <ul class="mode__list">
    <li class="mode">
      <label class="mode__label">
        <input type="radio" name="mode" value="bicycle">
        Bicycle
      </label>
      <div class="mode__content">
        <p>This content should only show when the
        bicycle method is selected.</p>
        <button type="button">Fake submit</button>
      </div>
    </li>

    <li class="mode">
      <label class="mode__label">
        <input type="radio" name="mode" value="bus">
        Bus
      </label>
      <div class="mode__content">
        <p>This content should only show when the
        bus method is selected.</p>
        <button type="button">Fake submit</button></div>
    </li>

    <li class="mode">
      <label class="mode__label">
        <input type="radio" name="mode" value="walking">
        Walking
      </label>
      <div class="mode__content">
        <p>This content should only show when the
        walking method is selected.</p>
        <button type="button">Fake submit</button></div>
    </li>
  </ul>

  <button type="submit" hidden>Real submit</button>
</form>

SCSS

.mode {
  margin: 1px 0;
  padding: 1rem;
  background-color: #eee;

  &__list {
    list-style: none;
    padding: 0;
  }
}








































body {
  font-family: sans-serif;
}