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

John Cleghorn
John Cleghorn
2,355 Points

how does class work?

I'm not understanding <div class=" ">

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>

2 Answers

Salvador Cervantes
Salvador Cervantes
10,898 Points

Hey,

<div> is used in HTML.

"class" is used to refrence CSS along with ID.

what that code is saying is that anything between the opening and closing <div>, apply the settings done in the CSS class of favorite_stuff.

in Css, it would look something like

.favorite_stuff { background-color: black; }

side note, ID will always look like this in the CSS file

favorite_stuff {

color: red; }

Class's use "." ID's use "#"

Hope this helps :)

John Cleghorn
John Cleghorn
2,355 Points

Thanks, Salvador

I'm having trouble with this question.

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">

FOR THIS CODE

<body> <h1>First Day of School</h1>

<form>

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

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

</form>

</body>

WHEN I INSERT THE CODE <div class="favorite_stuff"> AS FOLLOWS

<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>

THE ANSWER COMES BACK

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