Tell us what’s happening:
Got a 20%. Not bad, but what I’m I missing ?
Your code so far
<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<h1 id="title">How can we better improve your customers experience?</h1>
<p id="description">Thank you for taking your time to help us better your customer experience.</p>
<form id="survey-form">
<div class="input-element">
<label id="name-label">Name: <input placeholder="Enter your name" id="name" type="text" required /></label>
</input>
</div>
<div class="input-element">
<label id="email-label">Email: <input placeholder="Email your email" id="email" type="email" required /></label>
</input>
</div>
<div class="input-element">
<label id="number-label">Age: <input placeholder="Enter our age" id="number" type="number" min="18" max="120" /></label>
</input>
</div>
<div class="input-element">
<label id="select-lable">What is your favorite drink?:</label>
<select id="dropdown">
<option>Water</option>
<option>Wine</option>
<option>Burban</option>
<option>gin</option>
<option>Cocktails</option>
<option>Busa</option>
</select>
</div>
<div>
<label>Are you Vegan?</label>
<div> <label> <input type="radio" name="vegan" value="yes"/>Yes</label></div>
<div> <label> <input type="radio" name="vegan" value="no"/>No</label></div>
<div class="input-element">
</div>
<label>Which suggestions are for our menu update?</label>
<div> <label> <input type="checkbox" name="ideas" value="digital"/>Introduction of digital menu cards.</label></div>
<div> <label> <input type="checkbox" name="ideas" value="booklet"/>Retaining the old blooklet menu.</label></div>
<div> <label> <input type="checkbox" name="ideas" value="vegan"/>Introducion of vegan food.</label></div>
<div> <label> <input type="checkbox" name="ideas" value="dessert"/>Introducion of dessert menu.</label></div>
</div>
<div class="input-element">
<label>Additional comments</label>
<textarea type="text"></textarea>
</div>
<button id="submit" type="submit">
Submit
</button>
/* file: styles.css */
body{
background-color:lightblue;
text-align:center;
}
form{
max-width:500px;
text-align:left;
padding:20px;
border:2px solid black;
border-radius:10px;
}
input{
padding:5px;
border:none;
border-radius:5px;
}
.input-element{
display: flex;
flex-direction:column;
margin: 10px;
}
select{
padding:5px;
border:none;
border-radius:5px;
}
input[type="checkbox"] {
width:40px;
height:15px
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: