JavaScript Treehouse Club - MASH MASH - HTML Forms, Divs, and Inputs

Jeffrey Chandler
Jeffrey Chandler
1,664 Points

where did i go wrong?

keeps saying i miss spelled the second div class

index.html
<body>
  <h1>First Day of School</h1>

  <form>

 <div class="favorite_stuff">
   <div>
      <h4>Favorite Foods?</h4>
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
    </div>

 <div class="favorite_stuff"> 
   <div>
      <h4>Favorite Animals?</h4>
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
    </div>

  </form>

</body>

2 Answers

It looks like you are missing the closing tags for the divs:

<form>

 <div class="favorite_stuff">
   <div>
      <h4>Favorite Foods?</h4>
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
    </div>
 </div> <!-- / end of favorite_stuff -->

 <div class="favorite_stuff"> 
   <div>
      <h4>Favorite Animals?</h4>
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
    </div>
 </div>  <!-- / end of favorite_stuff -->

</form>

Cheers.

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there, Jeffrey Chandler! The other answer in this thread is partially correct. The div tags are not closed correctly.

That being said, the code expects a grand total of two divs whereas your code and the other answer contain a total of four divs. You were meant to add the class names to the divs that were already there instead of nesting the divs within other divs. Take a look:

  <form> <!-- begin form -->

    <div class="favorite_stuff">  <!-- begin first div -->
      <h4>Favorite Foods?</h4>
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
    </div>  <!-- end first div -->

    <div class="favorite_stuff"> <!-- begin second div -->
      <h4>Favorite Animals?</h4>
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
    </div> <!-- end second div -->

  </form> <!-- end form -->

:bulb: Going forward, it's a good idea to try not to do anything in these challenges that isn't explicitly asked for. In this case, two divs were created which were not required by the challenge. Even if functional outside the challenge, it can cause the challenge to fail because it is looking for a very specific match.

Hope this helps! :sparkles: