Free Code Camp: Survey

In this example below you will see how to do a Free Code Camp: Survey with some HTML / CSS and Javascript

This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on
Copyright captnstarburst ©
  • HTML
  • CSS
  • JavaScript

		<h1 id="title">A FreeCodeCamp <i class="fab fa-free-code-camp"></i> Survey</h1>
		<p id="description"><small>* notes a required field</small></p>

		<form id="survey-form">
			<label for="name" id="name-label">* Name :</label>
			<input id="name" name="name" placeHolder="Your Name" type="text" required>
			<label for="email" id="email-label">* Email :</label>
			<input id="email" name="email" placeHolder="Your Email" type="email" required>
			<label for="age" id="number-label">* Age :</label>
			<input id="number" name="age" placeHolder="Age" type="number" min="1" max="100" required>

			<label for="dropdown"> What Do You Like Best about FCC :</label>
			<select id="dropdown" name="dropdown" class="dropdown">
      		<option disabled selected value>Select an option</option>
      		<option  value="challenges">Challenges</option>
      		<option value="projects">Projects</option>
      		<option value="community">Community</option>
      		<option value="openSource">Open Source</option>
      		<option value="other">Other</option>

			<label for="dropdown"> What Can We Improve :</label>
      <input type="checkbox" id="first" name="fruit-1" value="cherry">
      <label for="first">I like cherry</label>
      <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
      <label for="second">I can't like banana</label>
      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
      <label for="third">I like strawberry</label>



/*Downloaded from */
body {
	background-image: url("");
	/* font-family: 'Roboto', sans-serif; */
	font-family: Lato;

article {
	margin: 5% auto;
	background: rgba(0, 100, 0, 1);
	color: white;
	font: 112.5%/1.45em georgia, serif;
	box-shadow: 10px 10px 10px black;

	text-align: center;
	width: 55%;
form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: 2%;
	grid-gap: 10px;
label {
	text-align: right;
	padding-right: 15px;
input {
	width: 50%;
	opacity: 0.9;
select {
	width: 25%;
	opacity: 0.9;
select:hover option {

.checkbox {

/*Downloaded from */