<header>
  <h1 id="title">Simple Survey</h1>
  <p id="description">This is my second of five final projects for
    freeCodeCamp's Responsive Web Design course</p>
</header>
<main>
  <form action="" id="survey-form">
    <label for="name" id="name-label">What is your name? <input type="text"
          id="name" name="name" placeholder="Enter your name" required></label>
    <label for="email" id="email-label">What is your email address? <input
          type="email" id="email" name="email" placeholder="Enter email address"
          required></label>
    <label for="number" id="number-label">On a scale of 1–10, how would you rate
      this webpage? (optional) <input type="number" id="number"
          name="webpage-rating" placeholder="1–10" min="1" max="10"></label>
    <p>How did you find this webpage?</p>
    <select name="how-user-found-this-page" id="dropdown" required>
      <option value="" selected disabled>Select an option</option>
      <option value="codepen">My Codepen profile</option>
      <option value="freecodecamp">My freeCodeCamp profile</option>
      <option value="linkedin">My LinkedIn profile</option>
      <option value="other">Other</option>
    </select>
    <p>Have you viewed any of my other projects for freeCodeCamp's Responsive
      Web Design course?</p>
    <label for="viewed"><input type="radio" id="viewed"
          name="has-viewed-other-projects" value="yes" required> Yes</label>
    <label for="not-viewed"><input type="radio" id="not-viewed"
          name="has-viewed-other-projects" value="no"> No</label>
    <p>If you selected "Yes" on the previous question, which projects have you
      viewed?</p>
    <label for="tribute-page"><input type="checkbox" id="tribute-page"
          name="viewed-projects" value="tribute-page"> Ada Lovelace Tribute
      Page</label>
    <label for="product-landing-page"><input type="checkbox"
          id="product-landing-page" name="viewed-projects"
          value="product-landing-page"> Product Landing Page</label>
    <label for="technical-doc-page"><input type="checkbox"
          id="technical-doc-page" name="viewed-projects"
          value="technical-documentation-page"> Technical Documentation
      Page</label>
    <label for="portfolio-page"><input type="checkbox" id="portfolio-page"
          name="viewed-projects" value="personal-portfolio-page"> Personal
      Portfolio Page</label>
    <label for="none"><input type="checkbox" id="none" name="viewed-projects"
          value="none"> I haven't viewed any of the other projects</label>
    <label for="comments">Do you have any additional comments?<br><textarea
          name="comments" id="comments" cols="80" rows="10"></textarea></label>
    <input type="submit" id="submit" value="Submit" disabled>
    <p><em>Disclaimer: The submit button doesn't (and is <b>not</b>) meant to
        work.</em></p>
  </form>
</main>

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #add8e6;
  margin: 0;
}

header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 25vh;
  padding: max(16px, 2vw);
  text-align: center;
}

header > * {
  margin: 0;
}

main {
  padding: 0 max(4vw, 32px) max(4vw, 32px);
}

#survey-form {
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 5px 5px 0 #000;
  padding: max(1vw, 8px);
}

label {
  display: block;
}

form > p {
  margin-bottom: .5em;
}

'use strict';

const projectName = 'survey-form';

const surveyLabels = document.getElementsByTagName('label');

for (const label of surveyLabels) {
  /*
   * Because it's value changes with each iteration, the `inputType` variable
   * doesn't have a constant case name.
   */
  const inputType = document.getElementById(label.getAttribute('for')).type;
  label.style.margin =
      ['radio', 'checkbox'].includes(inputType) ? '.5em 0' : '1em 0';
}