Responsive Web Design - Survey Form v.02

index.html

<div class="container  my-5 p-5 text-dark">
  <h1 id="title" class="text-center">New Books for the Library</h1>

  <p id="description" class="text-justify px-7">
    We are planning on adding some new books to our catalog and to the library's physical location. We would love to have your input on which sections most interest you and which one you would like to see in the library's selection first.
  </p>

  <hr class="hr--short">

  <!-- START Form -->
  <form id="survey-form" class="needs-validation" method="GET" novalidate>

    <!-- Name and Email -->
    <div class="row">

      <div class="col-md-6 col-sm-6">
        <label for="name" id="name-label">*Name:</label>
        <input type="text" id="name" class="form-control" placeholder="ex: Jane Doe" required>

        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter your first and last name.</div>
      </div>

      <div class="col-md-6 col-sm-6">
        <label for="email" id="email-label">*Email:</label>
        <input type="email" id="email" class="form-control" placeholder="example@email.com" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">

        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter a valid email.</div>
      </div>

    </div>
    <!-- END Name and Email -->

    <!-- Checkouts and Visits -->
    <div class="row">

      <div class="col-md-6 col-sm-6">
        <label for="checkouts" id="number-label">*How many books have you checked out today? (Max: 20 books)</label>
        <input type="number" id="number" class="form-control" name="checkouts" min="0" max="20" placeholder="Please enter up to 20 books" pattern="/^[0-9]$|^0[1-9]$|^1[0-9]$|^20$/" required>

        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter a number from 0-20.</div>
      </div>

      <div class="col-md-6 col-sm-6">

        <label for="dropdown" id="dropdown-label">*How many times do you come visit the library?</label>
        <select id="dropdown" class="custom-select" name="visits" size="1" required>
                <option value="">Select an option</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="biweekly">Bi-Weekly</option>
                <option value="monthly">Monthly</option>
              </select>

        <div class="invalid-feedback">Example invalid custom select feedback</div>

      </div>
    </div>
    <!-- END Checkouts and Visits -->

    <hr class="hr--short">

    <!-- New Areas -->
    <div id="new-areas" class="form-group">

      <div class="col-md-12">
        <p>Of the genres below, which ones would you most like to see in the library?</p>

        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="graphic-novels-radio" name="genre-radio" class="custom-control-input" value="Graphic Novels" required>
          <label class="custom-control-label" for="graphic-novels-radio">Graphic Novels</label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="american-cartoons-radio" name="genre-radio"  class="custom-control-input" value="American Cartoons" required>
          <label class="custom-control-label" for="american-cartoons-radio">American Cartoons</label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="video-game-dev-radio" name="genre-radio"  class="custom-control-input" value="Video Game Development" required>
          <label class="custom-control-label" for="video-game-dev-radio">Video Game Development</label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="anime-radio" name="genre-radio"  class="custom-control-input" value="Anime (Japanese Cartoons)" required>
          <label class="custom-control-label" for="anime-radio">Anime (Japanese Cartoons)</label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="none-radio" name="genre-radio"  class="custom-control-input" value="None of these genres" required>
          <label class="custom-control-label" for="none-radio">None of these genres</label>
        </div>

      </div>

    </div>
    <!-- END New Areas -->

    <hr class="hr--short">

    <!-- Subjects -->
    <div id="subjects" class="form-group">
        <p>Of the listed types of book subjects, which ones would you be most interested in choosing to read? Please check as many as you would like. (Click the title link for an example of the subject material.)</p>

      <!-- Graphic Novel -->
      <div id="subject01">

        <p class="lead">Graphic Novels <a href="#" class="small" data-toggle="modal" data-target="#graphicNovelModal">(More information)</a></p>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="memoir-check" value="Memoir)">
          <label class="custom-control-label" for="memoir-check">Memoir</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="scifi-check" value="Science Fiction">
          <label class="custom-control-label" for="scifi-check">Science Fiction</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="fantasy-check" value="Fantasy">
          <label class="custom-control-label" for="fantasy-check">Fantasy</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="dystopian-check" value="Dystopian">
          <label class="custom-control-label" for="dystopian-check">Dystopian</label>
        </div>

      </div>
      <!-- END Graphic Novel -->

      <!-- American Cartoons -->
      <div id="subject02">

        <p class="lead">American Cartoons <a href="#" class="small" data-toggle="modal" data-target="#americanCartoonsModal">(More information)</a></p>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="cartoon-history-check" value="History">
          <label class="custom-control-label" for="cartoon-history-check">History</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="cartoon-draw-check" value="How To Draw Cartoons">
          <label class="custom-control-label" for="cartoon-draw-check">How To Draw Cartoons</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="cartoon-voice-check" value="Voice Acting">
          <label class="custom-control-label" for="cartoon-voice-check">Voice Acting</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="cartoon-career-check" value="Career Advice">
          <label class="custom-control-label" for="cartoon-career-check">Animation Career Advice</label>
        </div>

      </div>
      <!-- END American Cartoons -->

      <!-- Video Game Dev -->
      <div id="subject03">

        <p class="lead">Video Game Development <a href="#" class="small" data-toggle="modal" data-target="#videoGamesModal">(More information)</a></p>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="video-game-coding-check" value=">Coding">
          <label class="custom-control-label" for="video-game-coding-check">Coding</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="video-game-art-check" value="Video Game Art">
          <label class="custom-control-label" for="video-game-art-check">Video Game Art</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="video-game-indie-check" value="Independent ('Indie') Games">
          <label class="custom-control-label" for="video-game-indie-check">Independent ("Indie") Games</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="video-game-history-check" value="History">
          <label class="custom-control-label" for="video-game-history-check">History</label>
        </div>

      </div>
      <!-- END Video Game Dev -->

      <!-- Anime -->
      <div id="subject04">

        <p class="lead">Anime (Japanese Cartoons) <a href="#" class="small" data-toggle="modal" data-target="#animeModal">(More information)</a></p>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="anime-history-check" value="History">
          <label class="custom-control-label" for="anime-history-check">History</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="anime-draw-check" value="How To Draw Anime">
          <label class="custom-control-label" for="anime-draw-check">How To Draw Anime</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="anime-voice-check" value="Cultural Influence">
          <label class="custom-control-label" for="anime-voice-check">Cultural Influence</label>
        </div>

        <div class="custom-control custom-checkbox custom-control-inline">
          <input type="checkbox" class="custom-control-input" id="anime-career-check" value="Career Advice">
          <label class="custom-control-label" for="anime-career-check">Career Advice</label>
        </div>

      </div>
      <!-- END Anime -->
    </div>
    <!-- END Subjects -->

    <hr class="hr--short">

    <!-- Additional Comments -->
    <div class="form-row">
      <div class="col">

        <p>Is there anything else you would like us to know? (Optional)</p>
        <label for="basic" class="sr-only">Additional Comments</label>
        <textarea id="basic" class="form-control" name="basic" placeholder="Enter additional comments here." rows="5" cols="90"></textarea>

      </div>
    </div>
    <!-- END Additional Comments -->

    <!-- Submit button -->
    <div class="form-row">
      <div class="col">

        <p class="mt-5 text-center">All set? When you're ready to submit your form, press the button below.</p>
        <input id="submit" class="btn btn-primary btn-lg btn-block" type="submit" value="Submit" />

      </div>
    </div>
    <!-- END Submit button -->

  </form>
  <!-- END Form -->

  <!-- Graphic Novel Modal -->
  <div class="modal fade" id="graphicNovelModal" tabindex="-1" role="dialog" aria-labelledby="graphicNovelModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="graphicNovelModalLabel">Graphic Novels</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <blockquote>
            <strong>Definition:</strong> <em>A story that is presented in comic-strip format and published as a book</em>
          </blockquote>
          <p><strong>Examples:</strong></p>
          <ul class="list-unstyled">
            <li><a href="https://www.amazon.com/Complete-Persepolis-Marjane-Satrapi/dp/0375714839/ref=sr_1_1?s=books&ie=UTF8&qid=1533670671&sr=1-1&keywords=persepolis" target="_blank">Persepolis</a></li>
            <li><a href="https://www.amazon.com/Complete-Maus-Art-Spiegelman/dp/0679406417/ref=sr_1_1?s=books&ie=UTF8&qid=1533670695&sr=1-1&keywords=maus" target="_blank">Maus</a></li>
            <li><a href="https://www.amazon.com/Hyperbole-Half-Unfortunate-Situations-Mechanisms-ebook/dp/B00BSB2AE4/ref=sr_1_1?s=books&ie=UTF8&qid=1533670721&sr=1-1&keywords=hyperbole+and+a+half" target="_blank">Hyperbole and a Half</a></li>
            <li><a href="https://www.amazon.com/Saga-Vol-1-Brian-Vaughan/dp/1607066017/ref=sr_1_4?s=books&ie=UTF8&qid=1533670809&sr=1-4&keywords=saga" target="_blank">Saga</a></li>
            <li><a href="https://www.amazon.com/How-Fall-Forever-Black-Science/dp/1607069679/ref=sr_1_1?s=books&ie=UTF8&qid=1533670890&sr=1-1&keywords=black+science+vol+1" target="_blank">Black Science</a></li>
          </ul>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- END Graphic Novel Modal -->

  <!-- American Cartoons Modal -->
  <div class="modal fade" id="americanCartoonsModal" tabindex="-1" role="dialog" aria-labelledby="americanCartoonsModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="americanCartoonsModalLabel">American Cartoons</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <blockquote>
            <strong>Definition:</strong> <em>a motion picture that is made from a series of drawings, computer graphics, or photographs of inanimate objects (such as puppets) and that simulates movement by slight progressive changes in each frame</em>
          </blockquote>
          <p><strong>Examples:</strong></p>
          <ul class="list-unstyled">
            <li><a href="https://www.amazon.com/Looney-Tunes-Merrie-Melodies-Illustrated/dp/0805008942/ref=sr_1_3?s=books&ie=UTF8&qid=1533670285&sr=1-3&keywords=history+of+looney+tunes" target="_blank">Looney Tunes and Merrie Melodies</a></li>
            <li><a href="https://www.amazon.com/Cartooning-Ultimate-Character-Design-Book/dp/1933027428/ref=sr_1_4?ie=UTF8&qid=1533671408&sr=8-4&keywords=how+to+draw+cartoon+characters" target="_blank">Cartooning: The Ultimate Character Design Book</a></li>
            <li><a href="https://www.amazon.com/Magic-Behind-Voices-Who%C3%A2%C2%80%C2%99s-Cartoon-ebook/dp/B001N2MUVQ/ref=sr_1_1?ie=UTF8&qid=1533671627&sr=8-1&keywords=voice+acting+for+cartoons" target="_blank">The Magic Behind the Voices</a></li>
            <li><a href="https://www.amazon.com/Your-Career-Animation-Survive-Thrive/dp/1581154453/ref=sr_1_1?ie=UTF8&qid=1533672983&sr=8-1&keywords=career+in+animation" target="_blank">Your Career in Animation</a></li>
            <li><a href="https://www.amazon.com/Draw-Famous-Cartoons-Step-Step/dp/0823085686/ref=sr_1_3?ie=UTF8&qid=1533671408&sr=8-3&keywords=how+to+draw+cartoon+characters" target="_blank">Draw 50 Famous Cartoons</a></li>
          </ul>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- END American Cartoons Modal -->

  <!-- Video Game Development Modal -->
  <div class="modal fade" id="videoGamesModal" tabindex="-1" role="dialog" aria-labelledby="videoGamesModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="videoGamesModalLabel">Video Game Development</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <blockquote>
            <strong>Definition:</strong> <em> the process of creating a video game. The effort is undertaken by a game developer, who may range from a single person to an international team dispersed across the globe</em>
          </blockquote>
          <p><strong>Examples:</strong></p>
          <ul class="list-unstyled">
            <li><a href="https://www.amazon.com/Video-Games-Design-Adventure-Yourself/dp/1619302918/ref=sr_1_1?ie=UTF8&qid=1533673380&sr=8-1&keywords=video+game+code" target="_blank">Video Games: Design and Code Your Own Adventure</a></li>
            <li><a href="https://www.amazon.com/Art-Game-Design-Lenses-Second/dp/1466598646/ref=sr_1_4?s=books&ie=UTF8&qid=1533673961&sr=1-4&keywords=video+game+art" target="_blank">The Art of Game Design: A Book of Lenses</a></li>
            <li><a href="https://www.amazon.com/Indie-Games-Complete-Introduction-Gaming-ebook/dp/B01BDXLDVW/ref=sr_1_3?s=books&ie=UTF8&qid=1533674365&sr=1-3&keywords=indie+games" target="_blank"> Indie Games: The Complete Introduction to Indie Gaming</a></li>
            <li><a href="https://www.amazon.com/Ultimate-History-Video-Games-Pokemon/dp/0761536434/ref=sr_1_2?s=books&ie=UTF8&qid=1533674706&sr=1-2&keywords=history+of+video+games" target="_blank">Ultimate History of Video Games</a></li>
            <li><a href="https://www.amazon.com/Designing-Creatures-Characters-Portfolio-Animation/dp/1440344094/ref=sr_1_5?s=books&ie=UTF8&qid=1533673736&sr=1-5&keywords=video+game+art" target="_blank">Desiging Creatures and Characters</a></li>
          </ul>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- END Video Game Development Modal -->
  
    <!-- Anime Modal -->
  <div class="modal fade" id="animeModal" tabindex="-1" role="dialog" aria-labelledby="animeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="animeModalLabel">Anime (Japanese Cartoons)</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <blockquote>
            <strong>Definition:</strong> <em> a style of Japanese film and television animation, typically aimed at adults as well as children</em>
          </blockquote>
          <p><strong>Examples:</strong></p>
          <ul class="list-unstyled">
            <li><a href="https://www.amazon.com/Anime-History-Jonathan-Clements/dp/1844573907/ref=sr_1_1?s=books&ie=UTF8&qid=1533675155&sr=1-1&keywords=history+of+anime" target="_blank">Anime: A History</a></li>
            <li><a href="https://www.amazon.com/Geek-Japan-Discovering-Manga-Ceremony/dp/4805311290/ref=sr_1_2?s=books&ie=UTF8&qid=1533675155&sr=1-2&keywords=history+of+anime" target="_blank">A Geek in Japan</a></li>
            <li><a href="https://www.amazon.com/Master-Guide-Drawing-Anime-Characters/dp/1936096862/ref=sr_1_2?s=books&ie=UTF8&qid=1533675441&sr=1-2&keywords=how+to+draw+anime+characters" target="_blank">Master Guide to Drawing Anime</a></li>
            <li><a href="https://www.amazon.com/Your-Career-Animation-Survive-Thrive/dp/1581154453/ref=sr_1_1?ie=UTF8&qid=1533672983&sr=8-1&keywords=career+in+animation" target="_blank">Your Career in Animation</a></li>
            <li><a href="https://www.amazon.com/Anime-Boom-United-States-Industries/dp/0674976991/ref=sr_1_2?s=books&ie=UTF8&qid=1533676476&sr=1-2&keywords=cultural+influences+of+anime" target="_blank">The Anime Boom in the United States</a></li>
          </ul>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- END Anime Modal -->

</div>

responsive-web-design-survey-form-v-02.markdown

Responsive Web Design - Survey Form v.02

Survey form created to fulfill the requirement for the Responsive Web Design certificate for FreeCodeCamp.

A Pen by Danielle on CodePen.

License.

script.js

// Example starter JavaScript for disabling form submissions if there are invalid fields from http://getbootstrap.com
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

style.css

body {
  font-family: 'Arial', sans-serif;
  background: url('https://images.pexels.com/photos/1166657/pexels-photo-1166657.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat fixed center;
}
.container {
  /* Background color found at ColorHex */
/*   background-color: rgba(1, 62, 89, 0.8); */
  background-color: rgba(250,250,250);
  border-radius: 10px;
}

h1#title {
  text-align: center;
}

#description {
  font-size: 16px;
}

.hr--short {
  border-top: 1px solid #252427;
  width: 80%;
}

/* Taken from MDN Web Docs */
legend {
  border-radius: 5px;
  font-size: 18px;
}

.output {
  font: 1rem "Fira Sans", sans-serif;
}

input {
  margin: 0.4rem;
}

#subject01, #subject02, #subject03 {
  margin-bottom: 30px;
}

.small {
  font-size: 12px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />