FCC: Survey Form - Handmade Craft Fair Survey Form

fcc-survey-form-handmade-craft-fair-survey-form.markdown

FCC: Survey Form - Handmade Craft Fair Survey Form

A Pen by Hauwa Abashiya on CodePen.

License.

index.html

<h1 id="title">Handmade Craft Fair Survey Form</h1>

<main class="main">
<p id="description">Please help us make the Handmade Craft Fair better by completing the short survey below</p>

<form id="survey-form" action="">
  
  <label for="name" id="name-label">Name:</label>
  <input type="text" required id="name" name="name" placeholder="Fullname">
  
  <label for="email" id="email-label">Email:</label>
  <input type="email" required id="email" name="email" placeholder="Email address">
  
  <label for="number" id="number-label">Age:</label>
  <input type="number" id="number" name="number" min="10" max="100" placeholder="How old are you?">
  
  <label for="number-label">Ticket Type:</label>
  <select name="dropdown" id="dropdown">
    <option selected="selected" disabled="disabled">Select an option</option>
    <option value="individual">Individual</option>
    <option value="group">Group</option>
    <option value="vip">VIP</option>
  </select>

<fieldset>
  <legend id="first">
    How likely are you to recommend the Handmade Craft Fair to a friend?</legend>
   <input id="one" type="radio" name="items" value="one"><label for="one">Definitely</label><br>
    <input id="two" type="radio" name="items" value="two"><label for="two">Maybe</label><br>
    <input id="three" type="radio" name="items" value="three"><label for="one">Never</label>
</fieldset>
<br>
<label for="number-label" id="second-drop">What did you like most about the Handmade Craft Fair?</label>
  <select name="dropdown" id="dropdown2">
    <option selected="selected" disabled="disabled">Select an option</option>
    <option value="exhibitors">Exhibitors</option>
    <option value="workshop">Workshops</option>
    <option value="talks">Seminars/Talks</option>
    <option value="food">Food Stalls</option>
  </select>
  
  <fieldset>
  <legend>
    What can we improve on?</legend>
  <label for="venue"><input id="venue" type="checkbox" value="1" name="improvements"> Venue</label>
    <label for="food"><input id="food" type="checkbox" value="2" name="improvements">Food and Drink</label>
    <label for="access"><input id="access" type="checkbox" value="3" name="improvements"> Accessibility</label>
      <label for="speakers"><input id="speakers" type="checkbox" value="4" name="improvements"> Speakers</label>
    <label for="sessions"><input id="sessions" type="checkbox" value="5" name="improvements"> Sessions</label>
    <label for="sellers"><input id="sellers" type="checkbox" value="6" name="improvements">Exhibitors</label>
  </fieldset>
  <br>
 <label for="comment-label" id="comments">Any comments or suggestions?</label>
  <textarea rows="5" cols="50" id="comment-label" name="comment">Enter your comments here...</textarea>
  <br>
  <input type="submit" id="submit" value="Submit">

</form>
</main>

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

html, body{
  min-width:400px;
  background-color:#deccff;
  font-family:Lato, sans-serif;
  font-size:16px;
  text-align:center;
  color:white;
}

#title{
  font-size:2.5em;
  font-weight:700;
}

.main{
  background:#9c67fe;
  margin:2.5em 5em;
  padding:2em;
  display:block;
}

#description{
  font-size:1.25em;
  vw: 75vw;
}

#survey-form{
  padding:1.25em;
  margin:.5em;
}

label{
  padding:.5em;
}

legend{
  margin-top:1em;
}

#submit{
  margin:1.125em;
  padding:.25em;
  background-color:#5000e6;
  border:none;
  font-size:1.125em;
  color:white;
  text-transform:uppercase;
}

styles

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