Skip to content

Instantly share code, notes, and snippets.

@thusmiley

thusmiley/index.html

Last active April 17, 2021 17:18
Show Gist options
  • Save thusmiley/048e2e00e5fbcf2f231217ef5597c07a to your computer and use it in GitHub Desktop.
Save thusmiley/048e2e00e5fbcf2f231217ef5597c07a to your computer and use it in GitHub Desktop.
Download ZIP
Survey Form - freeCodeCamp (Solution)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">
Thank you for taking the time to help us improve the platform
</p>
<main>
<form id="survey-form" action="">
<!-- Name -->
<label for="name-label">Name*</label>
<br />
<input id="name" type="text" placeholder="Enter your name" required />
<br />
<!-- Email -->
<label for="email-label">Email*</label>
<br />
<input
id="email"
type="email"
placeholder="Enter your Email"
required
/>
<br />
<!-- Age -->
<label for="number-label">Age (optional)</label>
<br />
<input
id="number"
type="number"
placeholder="Age"
min="18"
max="99"
required
/>
<!-- Which option best describes your current role? -->
<p>Which option best describes your current role?</p>
<select id="dropdown">
<option value="" disabled selected hidden>Select current role</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<!-- What is your favorite feature of freeCodeCamp? -->
<p>What is your favorite feature of freeCodeCamp?</p>
<select name="dropdown2" id="dropdown2">
<option value="" disabled selected hidden>Select an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
</select>
<br />
<!-- What would you like to see improved? (Check all that apply) -->
<p>What would you like to see improved? (Check all that apply)</p>
<input
type="checkbox"
id="checkbox"
name="option--1"
value="improve"
checked
/>
<label for="option--1">Option 1</label> <br />
<input type="checkbox" id="checkbox" name="option--2" value="improve" />
<label for="option--2">Option 2</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--3">Option 3</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--4">Option 4</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--4">Option 5</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--6">Option 6</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--7">Option 7</label> <br />
<input
type="checkbox"
id="checkbox"
name="option--3"
value="improve"
value="improve"
/>
<label for="option--8">Option 8</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--9">Option 9</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--10">Option 10</label> <br />
<input type="checkbox" id="checkbox" name="option--3" value="improve" />
<label for="option--11">Option 11</label>
<br />
<!-- Would you recommend freeCodeCamp to a friend? -->
<p>Would you recommend freeCodeCamp to a friend?</p>
<input
type="radio"
name="radio"
id="definitely"
value="definitely"
checked
/>
<label for="definitely">Definitely</label>
<input type="radio" name="radio" id="maybe" value="maybe" />
<label for="maybe">Maybe</label>
<input type="radio" name="radio" id="notsure" value="notsure" />
<label for="notsure">Not sure</label>
<br />
<!-- Any comments or suggestions? -->
<p>Any comments or suggestions?</p>
<textarea
name="comment"
id="comment"
cols="50"
rows="5"
placeholder="Enter your comment here..."
></textarea>
<br />
<!-- Submit -->
<button id="submit" type="submit">Submit</button>
</form>
</main>
</body>
</html>
Raw
styles.css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background: linear-gradient(to right, lightskyblue, rgb(135, 233, 250));
height: 100vh;
}
main {
background-color: thistle;
max-width: 900px;
margin: auto;
padding: 13px;
border-radius: 5px;
}
#title {
text-align: center;
padding-top: 40px;
}
#description {
text-align: center;
padding-bottom: 20px;
}
p {
font-weight: 500;
}
#name,
#email,
#number,
#dropdown,
#dropdown2,
textarea,
button {
width: 400px;
padding: 10px;
border-style: none;
border-radius: 5px;
}
button {
background-color: rgb(98, 189, 98);
width: 420px;
}
#submit {
justify-content: center;
align-items: center;
font-size: 16px;
}
textarea {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#name,
#email {
margin-top: 10px;
margin-bottom: 10px;
}
#number {
margin-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment