Tell us what’s happening:
Everything is checked off as complete except: " You should have at least one textarea element that is a descendant of #survey-form ."
However, as you can see, this input - just like the others - is indeed set within the survey-form. I’ve tried moving the textarea around, just to see if it somehow helped, but nothing’s working. I don’t know how to get the test program to recognize it! And it’s not letting me complete the project till it counts as correct. Anybody have any ideas?! Thank you in advance!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<form id="survey-form">
<head>
<meta charset="UTF-8">
<title>Dessert Tourney</title>
<link rel="spreadsheet" href="styles.css">
</head>
<body>
<h1 id="title">Welcome to the Dessert Tourney!</h1>
<p id="description">Which dessert type will reign supreme as the raddest treat ever?? Make your voice heard by completing this survey!</p>
<fieldset>
<label for="name" id="name-label">Name</label> <input type="text" name="name" id="name" placeholder="enter your name" required />
<label for="email" id="email-label" >Email</label> <input type="email" name="email" id="email" placeholder="enter your email" required />
<label for="age" id="number-label">Age: <em>(optional)</em><input id="number" type="number" name="age" min="10" max="120" placeholder="years" /></label>
<label for="dropdown" id="choice"><strong>Which dessert has earned the crown??</strong>
<select id="dropdown" name="dropdown" required>
<option value="">(select one)</option>
<option value="1">Pie</option>
<option value="2">Cake</option>
<option value="3">Cookies</option>
<option value="4">Ice Cream</option>
</select>
</label>
<label><strong>How many days of the week do you wish you could have your chosen dessert?</strong></label>
<label><input type="radio" value="1" name="days"> 1 or 2 is good</input></label>
<label><input type="radio" value="2" name="days"> 3 to 4 would suffice</input></label>
<label><input type="radio" value="3" name="days"> 5 or 7, minimum!</input></label>
<label><strong>What toppings go best with your tasty champion?</strong>
<label> Chocolate <input type="checkbox" name="topping" value="1"></input></label>
<label> Whipped Cream <input type="checkbox" name="topping" value="2"></input></label>
<label> Fruit <input type="checkbox" name="topping" value="3"></input></label>
<label> Caramel <input type="checkbox" name="topping" value="4"></input></label>
<label> Nuts/Nut Butter <input type="checkbox" name="topping" value="5"></input></label>
<label> Candy <input type="checkbox" name="topping" value="6"></input></label>
<label> Sprinkles <input type="checkbox" name="topping" value="7"></input></label>
<label><strong>Tell us why you believe your pick reigns above the rest! </strong> <input type="textarea" name="explain" class="explain" rows="3" cols="30" placeholder="Mine is GALAXIES better.."></input></label>
</fieldset>
<input type="submit" value="Submit" id="submit" />
</body>
</form>
</html>
/* file: styles.css */
body {width: 100%; height: 100vh; margin: 0; color: rgb(0, 127, 255)}
label {display: block; margin: 0.5rem 0}
h1 {color: rgb(50, 0, 127); margin: 1em auto; text-align: center}
p {color: rgb(0, 255, 225); margin: 1em auto; text-align: center}
input {color: rgb(200, 0, 0); display: block}
input[type="radio"] {display: inline}
input[type="checkbox"] {display: inline}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 OPR/97.0.0.0
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
