FCC: Survey Form Project

fcc-survey-form-project.markdown

FCC: Survey Form Project

Completed Survey Form Project for FreeCodeCamp

A Pen by Erik Vasquez on CodePen.

License.

index.html

<center><h1 id="title">Free Code Camp Survey Form</h1></center>
<form id="survey-form">
  <div>
<label id='name-label'>Name:</label>
<input id="name" required placeholder="Full Name">
</div>
<div>
  <label id='email-label'>Email:</label>
<input id="email" type= "email" required placeholder="email">
</div>
  <div>
    <label id='Twitter'>Twitter:</label>
    <input id="Twitter Handle" type="Twitter Handle" placeholder="Twitter Handle">
  </div>
<div>
<label id='number-label'>Age:</label>
<input id='number' type="number" min="1" max="100"  placeholder="Age">
</div>
  <label id='dropdown-label'>Favorite Language:</label>
  <select id='dropdown'>
    <option></label>
  <option>JavaScript</option>
  <option>HTML5</option>
  </select>
</div>
<div>
  <br>
<label>Favorite Learning Style</label>
  <div>
    <br>
    <input type="radio" name="resource" value="1">
    <label>YouTube</label>
    <input type="radio" name="resource" value="2">
    <label>Online Resources</label>
    <input type="radio" name="resource" value="3">
    <label>Tradional Education</label>
    <input type="radio" name="resource" value="4">
    <label>Books</label>
  </div>
</div>
<br><br>
<div id="CheckboxSection">
  <label>CS Topics to Cover</label>
  <div>
<br>
<input type="checkbox" value="1">    
<label>ES6</label>
<input type="checkbox" value="2">
<label>D3</label>
<input type="checkbox" value="3">
<label>SASS</label>    
<input type="checkbox" value="4">
<label>LESS</label>
  <div>
    </div>
    <div>
      <br><br>
      <label>Suggestions:</label><textarea></textarea>
    </div><button id="submit">Submit</button>
    </form>
<center><p id="description">Applied Responsive Web Design Project Completed by Erik Vasquez (FCC: @redrag0n)</p></center>
  
  
  
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

h1{
color: white;
}

body{
  background-color: green;
}
form {
  background-color: white;
  width: 75%;
  border-radius: 20px;
  padding: 20px;
}

input {
  height: 30px;
  width: 100%;
}
select {
  height: 30px;
  width: 100%;
}
label {
  float: left;
  font-size: 20px;
  margin: 10px 0 10px 0;
}

#radioSection{
}

styles

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