VishrutAggarwal/fcc-survey-form.markdown

## fcc-survey-form.markdown

      
    Raw
  

              fcc-survey-form.markdown
            
          
    FCC: Survey Form

A freeCodeCamp certification project on Responsive Web Design.
A Pen by Vishrut Aggarwal on CodePen.
License.

  
## index.html
<html>
  <body>
    <main>
      <header>
        <h1 id = "title">A Random Survey Form</h1>
        <p id = "description" class = "italic">
          This random Survey is a practice form used to pry into your academic status
        </p>
      </header>
      <section>
        <form id = "survey-form">
          <div class = "input">
            <label for = "name" id = "name-label" class = "bold">Name: </label>
            <input type = "text" id = "name" name = "name" placeholder = "Firstname Lastname" required>
          </div>
          <br>
          <div class = "input">
            <label for = "email" id = "email-label" class = "bold">Email: </label>
            <input type = "email" id = "email" name = "email" placeholder = "Example@domain.com" required>
          </div>
          <br>
          <div class = "input">
            <label for = "age" id = "number-label" class = "bold">Age: </label>
            <input type = "number" id = "number" name = "age" placeholder = "NN" min = 10 max = 99 required>
          </div>
          <br>
          <div class = "input">
            <label for = "academic-status" class = "bold">Pick your poison: </label>
            <select id = "dropdown" name = "academic-status">
              <option disabled selected value>Select</option>
              <option>Undergraduate </option>
              <option>Graduate</option>
              <option>Post-Graduate </option>
              <option>Doctorate</option>
            </select>
          </div>
          <br>
          <fieldset id = "satisfaction-check">
            <legend class = "bold">
              Are you satisfied by your current achievements?
            </legend>
            <input id="yes" type="radio" name="satisfaction-check" value="yes">
            <label for = "yes">Yes</label>
            <br>
            <input id="no" type="radio" name="satisfaction-check" value="no">
            <label for = "no">No</label>
            <br>
            <input id="maybe" type="radio" name="satisfaction-check" value="maybe">
            <label for = "maybe">Maybe</label>
            <br>
            <input id="idk" type="radio" name="satisfaction-check" value="idk">
            <label for = "idk">I don't know</label><br>
            <input id="what" type="radio" name="satisfaction-check" value="what" checked>
            <label for = "what">What is satisfaction?</label>
          </fieldset>
          <br>
          <fieldset id = "skill-check">
            <legend class = "bold">
            Which programming languages are you familiar with?
            </legend>
            <input type = "checkbox" value = "python" id = "python" name = "skill-check">
            <label for = "python">Python</label>
            <br>
            <input type = "checkbox" value = "cpp" id = "cpp" name = "skill-check">
            <label for = "cpp">C++</label>
            <br>
            <input type = "checkbox" value = "cs" id = "cs" name = "skill-check">
            <label for = "cs">C#</label>
            <br>
            <input type = "checkbox" value = "java" id = "java" name = "skill-check">
            <label for = "java">Java</label>
            <br>
            <input type = "checkbox" value = "other" id = "other" name = "skill-check">
            <label for = "other">Other</label>
            <br>
          </fieldset>
          <br>
          <div class = "comment">
            <label for = "suggestions" class = "bold">Any comments?</label>
            <br>
            <textarea></textarea>
          </div>
          <br>
          <button type = "submit" id = "submit" class = "bold">
            Submit
          </button>
        </form>
      </section>
    </main>
  </body>
</html>

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

## style.css
root {
  /*color variables*/
  --header-color: #D9FFF8;
  --section-color: #7CFFFF;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: #8DFFFF;
}
main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
header {
  display: flex;
  flex-direction: column;
  min-width: 600px;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  align-items: center;
  background-color: #D9FFF8;
}
section {
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin: 10px;
  border-radius: 10px;
  justify-content: space-between;
  background-color: #BDFFFF;
  min-width: 100%;
}
form {
  display: flex;
  flex-direction: column;
}
fieldset {
  padding: 5px;
  background-color: #D6FDFD;
  border-radius: 5px;
}
textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 60px;
  background-color: #D6FDFD;
}
input[type="text"] {
  background-color: #D6FDFD;
  border-radius: 5px;
}
input[type="number"] {
  background-color: #D6FDFD;
  border-radius: 5px;
}
input[type="email"] {
  background-color: #D6FDFD;
  border-radius: 5px;
}
.input {
  display: flex;
  align-items: center;
  gap: 5px;
}
select {
  background-color: #D6FDFD;
  border-radius: 5px;
}
button {
  background-color: #D7EEEE;
  color: #595959;
  max-width: 90px;
  border-radius: 5px;
}
/*Global elements*/
.bold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
	<html>
	<body>
	<main>
	<header>
	<h1 id = "title">A Random Survey Form</h1>
	<p id = "description" class = "italic">
	This random Survey is a practice form used to pry into your academic status
	</p>
	</header>
	<section>
	<form id = "survey-form">
	<div class = "input">
	<label for = "name" id = "name-label" class = "bold">Name: </label>
	<input type = "text" id = "name" name = "name" placeholder = "Firstname Lastname" required>
	</div>
	<br>
	<div class = "input">
	<label for = "email" id = "email-label" class = "bold">Email: </label>
	<input type = "email" id = "email" name = "email" placeholder = "Example@domain.com" required>
	</div>
	<br>
	<div class = "input">
	<label for = "age" id = "number-label" class = "bold">Age: </label>
	<input type = "number" id = "number" name = "age" placeholder = "NN" min = 10 max = 99 required>
	</div>
	<br>
	<div class = "input">
	<label for = "academic-status" class = "bold">Pick your poison: </label>
	<select id = "dropdown" name = "academic-status">
	<option disabled selected value>Select</option>
	<option>Undergraduate </option>
	<option>Graduate</option>
	<option>Post-Graduate </option>
	<option>Doctorate</option>
	</select>
	</div>
	<br>
	<fieldset id = "satisfaction-check">
	<legend class = "bold">
	Are you satisfied by your current achievements?
	</legend>
	<input id="yes" type="radio" name="satisfaction-check" value="yes">
	<label for = "yes">Yes</label>
	<br>
	<input id="no" type="radio" name="satisfaction-check" value="no">
	<label for = "no">No</label>
	<br>
	<input id="maybe" type="radio" name="satisfaction-check" value="maybe">
	<label for = "maybe">Maybe</label>
	<br>
	<input id="idk" type="radio" name="satisfaction-check" value="idk">
	<label for = "idk">I don't know</label><br>
	<input id="what" type="radio" name="satisfaction-check" value="what" checked>
	<label for = "what">What is satisfaction?</label>
	</fieldset>
	<br>
	<fieldset id = "skill-check">
	<legend class = "bold">
	Which programming languages are you familiar with?
	</legend>
	<input type = "checkbox" value = "python" id = "python" name = "skill-check">
	<label for = "python">Python</label>
	<br>
	<input type = "checkbox" value = "cpp" id = "cpp" name = "skill-check">
	<label for = "cpp">C++</label>
	<br>
	<input type = "checkbox" value = "cs" id = "cs" name = "skill-check">
	<label for = "cs">C#</label>
	<br>
	<input type = "checkbox" value = "java" id = "java" name = "skill-check">
	<label for = "java">Java</label>
	<br>
	<input type = "checkbox" value = "other" id = "other" name = "skill-check">
	<label for = "other">Other</label>
	<br>
	</fieldset>
	<br>
	<div class = "comment">
	<label for = "suggestions" class = "bold">Any comments?</label>
	<br>
	<textarea></textarea>
	</div>
	<br>
	<button type = "submit" id = "submit" class = "bold">
	Submit
	</button>
	</form>
	</section>
	</main>
	</body>
	</html>
	root {
	/color variables/
	--header-color: #D9FFF8;
	--section-color: #7CFFFF;
	}
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: sans-serif;
	background-color: #8DFFFF;
	}
	main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	}
	header {
	display: flex;
	flex-direction: column;
	min-width: 600px;
	padding: 20px;
	margin: 10px;
	border-radius: 10px;
	align-items: center;
	background-color: #D9FFF8;
	}
	section {
	display: flex;
	flex-direction: column;
	padding: 40px;
	margin: 10px;
	border-radius: 10px;
	justify-content: space-between;
	background-color: #BDFFFF;
	min-width: 100%;
	}
	form {
	display: flex;
	flex-direction: column;
	}
	fieldset {
	padding: 5px;
	background-color: #D6FDFD;
	border-radius: 5px;
	}
	textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 60px;
	background-color: #D6FDFD;
	}
	input[type="text"] {
	background-color: #D6FDFD;
	border-radius: 5px;
	}
	input[type="number"] {
	background-color: #D6FDFD;
	border-radius: 5px;
	}
	input[type="email"] {
	background-color: #D6FDFD;
	border-radius: 5px;
	}
	.input {
	display: flex;
	align-items: center;
	gap: 5px;
	}
	select {
	background-color: #D6FDFD;
	border-radius: 5px;
	}
	button {
	background-color: #D7EEEE;
	color: #595959;
	max-width: 90px;
	border-radius: 5px;
	}
	/Global elements/
	.bold {
	font-weight: 600;
	}
	.italic {
	font-style: italic;
	}