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

Thumbnail
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 Codepen.io
Copyright captnstarburst ©
  • HTML
  • CSS
  • JavaScript
    <main>

	<article>
		<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>
    	</select>

			<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>
    
		</form>

	</article>

</main>

/*Downloaded from https://www.codeseek.co/captnstarburst/free-code-camp-survey-eKJNJg */
    html,
body {
	background-image: url("https://conorhinchee.com/imgs/blog/paperBG.png");
	/* 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 https://www.codeseek.co/captnstarburst/free-code-camp-survey-eKJNJg */
    

Comments