Hello,
Something weird, Here under my code for the “survey form” project, so I blured it:
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap"
rel="stylesheet"
/>
<style>
body {
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
color: white;
background-color: darkblue;
}
h1 {
margin: 40px 0px 0px 0px;
}
#description {
font-weight: 600;
font-size: 1.125rem;
margin: 5px 0px 30px 0px;
text-shadow: 1px 1px 1px rgb(0 0 0 /100%);
color:white;
}
#container {
width: 700px;
margin: auto;
padding: 0px;
text-align: center;
}
input {
width: 100%;
}
#survey-form {
background-color: rgba(37,37,69, 0.9);
padding: 40px 40px 70px 40px;
text-align:left;
}
.div-input {
margin: 0px 0px 1.2rem 0px;
}
#name-label {
font-size: 1.1rem;
height: 50px;
line-height: 2rem;
}
#email-label {
font-size: 1.1rem;
height: 50px;
line-height: 2rem;
}
#number-label {
font-size: 1.1rem;
height: 50px;
line-height: 2rem;
}
.input-field {
height: 2.375rem;
border-radius: 0.25rem;
}
.input-field-comments {
height: 120px;
width: 100%;
border-radius: 0.25rem;
margin-bottom: 20px;
}
#name::placeholder {
font-family: 'Poppins', sans-serif;
padding: 10px;
color: grey;
font-size: 0.9rem;
font-weight: bold;
}
#email::placeholder {
font-family: 'Poppins', sans-serif;
padding: 10px;
color: grey;
font-size: 0.9rem;
font-weight: bold;
}
#number::placeholder {
font-family: 'Poppins', sans-serif;
padding: 10px;
color: grey;
font-size: 0.9rem;
font-weight: bold;
}
#comments::placeholder {
font-family: 'Poppins', sans-serif;
padding: 10px;
color: grey;
font-size: 0.9rem;
font-weight: bold;
vertical-align: text-top; /* Why vertical-align doesn't work ? */
}
#dropdown {
width: 100%;
height: 2.375rem;
border-radius: 0.25rem;
}
#dropdown-feature {
width: 100%;
height: 2.375rem;
border-radius: 0.25rem;
}
.select {
font-family: 'Poppins', sans-serif;
padding: 10px;
color: rgb(5, 5, 5);
font-size: 0.9rem;
font-weight: bold;
}
select {
font-family: 'Poppins', sans-serif;
padding: 5px 10px 5px 10px;
color: grey;
font-size: 0.9rem;
font-weight: bold;
}
.option {
font-size: 1.1rem;
line-height: 1.8rem;
margin: 0px;
}
#div-select {
margin-top: 30px;
}
#div-select-feature {
margin-top: 30px;
}
.bouton {
width: 15px;
height: 15px;
}
input[type="radio"]{
vertical-align: middle;
margin: 10px 10px 10px 0px;
}
input[type="checkbox"]{
vertical-align: middle;
margin: 10px 10px 10px 0px;
}
#submit {
background-color: #37af65;
font-size: 1.1rem;
height: 50px;
line-height: 2rem;
width: 100%;
color: white
}
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>
</header>
<form id="survey-form" methode="post" action="">
<div class="div-input">
<label id="name-label" for="name">Name</label>
<input
class="input-field"
id="name"
type="text"
name="name"
placeholder="Enter your name"
required
/>
</div>
<div class="div-input">
<label id="email-label" for="email">Email</label>
<input
class="input-field"
id="email"
type="email"
name="email"
placeholder="Enter your Email"
required
/>
</div>
<div class="div-input">
<label id="number-label" for="number">Age (optional)</label>
<input
class="input-field"
id="number"
type="number"
name="number"
placeholder="Enter your Age"
min="0"
max="99"
/>
</div>
<div id="div-select" class="div-input">
<p class="option">which option best describes your current role?</p>
<label for="dropdown"></label>
<select
id="dropdown"
name="select"
required
>
<option value="" class="select">Select an option</option>
<option value="dog" class="select">Designer</option>
<option value="cat" class="select">coder</option>
<option value="hamster" class="select">Community Manager</option>
</div>
<div>
<p class="option">Would you recommended freeCodeCamp to a friend?</p>
<label for="definitely">
<input id="definitely" class="bouton" value="Definitely" type="radio" name="recommend">Definitely<br>
</label>
<label for="maybe">
<input id="maybe" class="bouton" value="Maybe" type="radio" name="recommend">Maybe<br>
</label>
<label for="not">
<input id="not" class="bouton" value="Not sure" type="radio" name="recommend">Not sure<br>
</label>
</div>
<div id="div-select-feature" class="div-input">
<p class="option">What is your favorite feature of freeCodeCamp?</p>
<label for="dropdown-feature"></label>
<select
id="dropdown-feature"
name="select"
required
>
<option value="" class="select">Select an option</option>
<option value="dog" class="select">Chalenges</option>
<option value="cat" class="select">Projects</option>
<option value="hamster" class="select">Community</option>
<option value="hamster" class="select">Open source</option>
</div>
<div>
<!-- class="option" -->
<p>What would you like to see improved</p>
<label for="Front-end">
<input id="Front-end" class="bouton" value="Front-end Projects" type="checkbox" name="improved">Front-end Projects<br>
</label>
<label for="Back-end">
<input id="Back-end" class="bouton" value="Back-end Projects" type="checkbox" name="improved">Back-end Projects<br>
</label>
<label for="Data">
<input id="Data" class="bouton" value="Data Visualization" type="checkbox" name="improved">Data Visualization<br>
</label>
<label for="Challenges">
<input id="Challenges" class="bouton" value="Challenges" type="checkbox" name="improved">Challenges<br>
</label>
<label for="Open">
<input id="Open" class="bouton" value="Open Source Community" type="checkbox" name="improved">Open Source Community<br>
</label>
<label for="Gitter">
<input id="Gitter" class="bouton" value="Gitter help rooms" type="checkbox" name="improved">Gitter help rooms<br>
</label>
<label for="Videos">
<input id="Videos" class="bouton" value="Videos" type="checkbox" name="improved">Videos<br>
</label>
<label for="City">
<input id="City" class="bouton" value="City Meetups" type="checkbox" name="improved">City Meetups<br>
</label>
<label for="Wiki">
<input id="Wiki" class="bouton" value="Wiki" type="checkbox" name="improved">Wiki<br>
</label>
<label for="Forum">
<input id="Forum" class="bouton" value="Forum" type="checkbox" name="improved">Forum<br>
</label>
<label for="Additional">
<input id="Additional" class="bouton" value="Additional Courses" type="checkbox" name="improved">Additional Courses<br>
</label>
</div>
<div class="div-input">
<label class="label-input" for="comments">Any comments or suggestions?</label>
<textarea id="comments" class="input-field-comments" name="comments" placeholder="Enter your comment here..."></textarea>
</div>
<button id="submit" type="submit" value="Envoyer">Submit</button>
</form>
</div>
</body>
</html>
Ligne 228 and 229 of VScode.
There is a “div” and a “p” class “option”:
But “p” doesn’t appear when I launch it and as you see hereunder, in “dev Tool” the “p” (would you recommended freecodecamp to a friend?) is at the end of “select” element and there isn’t the “div”.
I hope that is clear for you.
What’s matter ?