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

Becca Rhew
Becca Rhew
1,508 Points

Can someone tell me what I am doing wrong here?

Screenshots: https://snag.gy/bs5r7J.jpg https://snag.gy/4WN1yu.jpg

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

  <form>

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

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

  </form>

</body>
Becca Rhew
Becca Rhew
1,508 Points

The challenge task: We want the same CSS style to apply to both <div> elements. Give both <div> elements the class of "favorite_stuff". Hint: The syntax for giving a <div> a class looks like this: <div class="favorite_stuff">

Becca Rhew
Becca Rhew
1,508 Points

Error message: Bummer! Your <div> elements need to both have 'class' attributes.

4 Answers

Hi ! Both of those div are not closed :

<div class="favorite_stuff">
Becca Rhew
Becca Rhew
1,508 Points

Hi there--I thought that it was closed at the end? (see where I typed HERE)

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

you have two divs one <div> and <div class="favorite_stuff"> the <div> is closed the <div class="favorite_stuff"> is not closed

Yes, it closes the last div element, but you've to repeat the closing tag for each div element declared

You probably meant to do something like :

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

or

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

Looks like you already have div a above your "<div class="favorite_stuff">" and the "<div class="favorite_stuff">" isn't closed

Becca Rhew
Becca Rhew
1,508 Points

I'm sorry, but I don't follow what you are saying (I am a total beginner!) :( Can you specify where it should go?

This should work what I did is I took out the <div> above your <div class="favorite_stuff">

  <h1>First Day of School</h1>

  <form>

     <!--DELETED THE EXTRA DIV THAT WAS HERE-->
     <div class="favorite_stuff">
      <h4>Favorite Foods?</h4>
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
      <input name="food[]">
    </div>

     <!--DELETED THE EXTRA DIV THAT WAS HERE-->
     <div class="favorite_stuff">
      <h4>Favorite Animals?</h4>
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
      <input name="animal[]">
    </div>

  </form>

</body>
Becca Rhew
Becca Rhew
1,508 Points

Deleting the <div> above each element did the trick! I understand what I did wrong now. Thanks a million, y'all!!

No problem! if you nee more help you can @ me on twitter @Fractured2K glad to help :)