FCC: Survey Form

fcc-survey-form.markdown

FCC: Survey Form

A Pen by Tracy on CodePen.

License.

index.html

<h1 id="title">Survey Form</h1>
<div id="form-outer">
  <p id="description">
    We want to get to know you!
  </p>
  <form id="survey-form" method="GET" action="https://crossorigin.me/https://freecodecamp.com">
    <div class="rowTab">
      <div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="email-label" for="email">* Email: </label>
      </div>
      <div class="rightTab">
        <input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label id="number-label" for="age">* Age: </label>
      </div>
      <div class="rightTab">
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="currentPos">What is your favorite color?</label>
      </div>
      <div class="rightTab">
        <select id="dropdown" name="currentPos" class="dropdown">
      <option disabled value>Select an option</option>
      <option  value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="purple">Purple</option>
      <option value="other">Other</option>
    </select>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="pets">Which pet do you prefer?</label>
      </div>
      <div class="rightTab">
        <ul  style="list-style: none;">
          <li class="radio"><label id="pets" class="prettydot">Dogs<input name="radio-buttons" value="1"  type="radio" class="userData"><span class="checkdot"></span></label></li>
          <li class="radio"><label id="pets" class="prettydot">Cats<input name="radio-buttons" value="1"  type="radio" class="userData"><span class="checkdot"></span></label></li>
          <li class="radio"><label id="pets" class="prettydot">Fish<input name="radio-buttons" value="1"  type="radio" class="userData"><span class="checkdot"></span></label></li>
          <li class="radio"><label id="pets" class="prettydot">None<input name="radio-buttons" value="1"  type="radio" class="userData"><span class="checkdot"></span></label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="food">What is your favorite food?</label>
      </div>
      <div class="rightTab">
        <select id="food" name="food" class="dropdown">
      <option disabled selected value>Select an option</option>
      <option value="pizza">Pizza</option>
      <option value="pasta">Pasta</option>
      <option value="burger">Burgers</option>
      <option value="dessert">Dessert</option>
    </select>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="hobbies">What hobbies do you enjoy?<br>(Check all that apply): </label>
      </div>
      <div class="rightTab">
        <ul id="hobbies" style="list-style: none;">
          <li class="checkbox"><label id="hobbies" class="prettycheck">Camping<input name="checkbox" value="1" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Shopping<input name="checkbox" value="2" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Sports<input name="checkbox" value="3" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Art<input name="checkbox" value="4" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Dancing<input name="checkbox" value="5" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Gaming<input name="checkbox" value="6" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Hiking<input name="checkbox" value="7" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Swimming<input name="checkbox" value="8" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Reading<input name="checkbox" value="9" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Fishing<input name="checkbox" value="10" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
          <li class="checkbox"><label id="hobbies"class="prettycheck">Skydiving<input name="checkbox" value="10" type="checkbox" class="userData"><span class="checkmark"></span></label></li>
        </ul>
      </div>
    </div>
    <div class="rowTab">
      <div class="labels">
        <label for="comments">Any thing else we should know?</label>
      </div>
      <div class="rightTab">
        <textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
      </div>
    </div>
    <button id="submit" type="submit">Submit</button>
  </form>
</div>

script.babel

// coded by @SamAI-Software
const projectName = 'survey-form';
localStorage.setItem('example_project', 'Survey Form');

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

html,
body {
  background-color: #581845;
  text-align: center;
  font-family: 'Amatic SC', cursive;
  font-size: 1.5em;
  min-width: 320px;
}
h1 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #FFC300;
}

header {
  font-size: 2em;
  font-weight: bold;
  margin: 20px;
}

#form-outer {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 900px;
  padding: 10px;
  padding-top: 20px;
}

.labels {
  display: inline-block;
  text-align: right;
  width: 40%;
  padding: 5px;
  vertical-align: top;
  margin-top: 10px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.input-field {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #FFC300;
  border-radius:15%;
  margin-top: 25px;
}
#description{
  font-family: 'Dancing Script', cursive;
  font-size: 1.5em;
  color: #FF5733;
}
#userAge {
  width: 40px;
 
}

.userData,
input[type="checkbox"] {
  float: left;
  margin-right: 15px;
}

#submit {
  background-color: #FFC300;
  border-radius: 4px;
  color: #FF5733;
  font-size: 80%;
  height: 40px;
  width: 96px;
  margin: 10px;
  border: 0px solid;
  font-family: 'Dancing Script', cursive;
}

.dropdown {
  height: 35px;
  width: 140px;
  padding: 5px;
  margin: 10px;  
  margin-top: 21px;
  border: 1px solid #FFC300;
  border-radius:15%;
}
.radio, .checkbox {
  position: relative;
  left: -43px;
  margin-left: 10px;
  display: block;
  padding-bottom: 10px;
}
.radio input, .checkbox input{
  position: relative;
  left: -43px;
  margin-left: 10px;
  display: block;
  padding-bottom: 10px;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 10px;
  left:0;
  margin-left: 0px;
  display: block;
  height: 15px;
  width: 15px;
  background-color: #FF5733;
  border: 5px ridge #FF5733;
  border-radius: 25%;
}
.checkdot {
  position: absolute;
  top: 10px;
  left:0;
  margin-left: 0px;
  display: block;
  height: 15px;
  width: 15px;
  background-color: #FF5733;
  border: 5px ridge #FF5733;
  border-radius: 50%;
}
 .prettycheck:hover input ~ .checkmark {
  background-color: #FFC300;
}  
.prettydot:hover input ~ .checkdot {
  background-color: #FFC300;
} 
.prettycheck input:checked ~ .checkmark {
  background-color: #581845;
  border: 5px ridge #581845;
}
.prettydot input:checked ~ .checkdot {
  background-color: #581845;
  border: 5px ridge #581845;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkdot:after {
  content: "";
  position: absolute;
  display: none;
}
.prettycheck input:checked ~ .checkmark:after {
  display: block;
}
.prettydot input:checked ~ .checkdot:after {
  display: block;
}
.prettycheck .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #FF5733;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.prettydot .checkdot:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #FF5733;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 833px) {
  .input-field {
    width: 80%;
  }
  select {
    width: 90%;
  }
}

@media screen and (max-width: 520px) {
  .labels {
    width: 100%;
    text-align: left;
  }
  .rightTab {
    width: 80%;
    float: left;
  }
  .input-field {
    width: 100%;
  }
  select {
    width: 100%;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />