Learn-html-by-building-a-cat-photo-app/step-50

HTML-CSS
1

Step 50Passed

So i am at this step and they ask from me the following

The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.

Nest the Indoor and Outdoor radio buttons within a fieldset element, and don’t forget to indent the radio buttons.

This is what i did

  <h1>CatPhotoApp</h1>
  <section>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
    <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  </section>
  <section>
    <h2>Cat Lists</h2>
    <h3>Things cats love:</h3>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <figure>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
      <figcaption>Cats <em>love</em> lasagna.</figcaption>  
    </figure>
    <h3>Top 3 things cats hate:</h3>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
    <figure>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
      <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
    </figure>
  </section>
  <section>
    <h2>Cat Form</h2>
    <form action="https://freecatphotoapp.com/submit-cat-photo">
    <fieldset>
      <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" > Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor" > Outdoor</label>
      <input type="text" name="catphotourl" placeholder="cat photo URL" required>
      <button type="submit">Submit</button>
    </fieldset>
      
      
    </form>
  </section>
</main>

What i did was nesting
< input type=“text” name=“catphotourl” placeholder=“cat photo URL” required>

  • < button type=“submit”>Submit*

Inside filedset element.

And i still am not sure if this is what indent means, but I passed the code and from the preview i get in the course, looks like they align good enough, but i still think i made a mistake somewhere. how does it look for you guys? please give me an advice and sorry if am not making my self clear enough with the information that i’m giving.

1 Like
2

From those instructions given, your closing fieldset tag should be after the outdoor radio button rather than after the submit button.

1 Like
3

Yes they should be like that. But if I put them after the submit button the buttons themselves get aligned bad and i dont get the indented effect that was required in the step description. So then if I put then as you say I this means that what i did is not what the step requiered from me . i will try again this step but i still dont know how to indent the radio buttons

1 Like
4

sorry if am not making my self clear enough with the information that i’m giving.

Haha you’re okay, don’t worry. When most fCC beginners have a problem, they just hit the “Get Help” button and immediately post their code to this forum without explanation. Even then, it’s usually possible to decipher what they’re asking about. You’re making yourself plenty clear, haha. :smile:

And i still am not sure if this is what indent means,

An example of indents:

<!--
no indent
  one indent
    two indents
 -->

Notice that “one indent” is farther to the right than “no indent,” and “two indents” even farther. Most text editors allow indents by hitting the “Tab” key.

HTML uses indents for formatting. One of my profs said, “code should look like poetry,” referring to good indentation. This is good indentation:

<!DOCTYPE html>
<html>
  <head>
    // TODO: link css
  </head>
  <body>
    <div id="header"></div>
    <footer>
      <p>Footer text</p>
    </footer>
  </body>
</html>

This is bad indentation, with the same code:

<!DOCTYPE html><html>
<head>// TODO: link css</head>
<body>
    <div id="header"></div>
  <footer><p>Footer text</p>
    </footer></body>
</html>

Even though they do the same thing, do you see how the first one looks so much nicer?

I second @jeff_beynon that your </fieldset> should be right after your id="outdoor" input and before your name="catphotourl" input.

(The test probably checks if there’s a fieldset element, and if so, also checks that the id="indoor" and id="outdoor" inputs are children of the fieldset element. Your code passes the test because the test doesn’t care if you add extra elements – it’d probably pass if you added 100 extra divs… wait, does that work?

tests it out

It absolutely does! That is hilarious :joy:)

1 Like
5

I dont know how can i text in here the code that i have without it, coming to life if that’s correct, i just want to see the text not the actual things that are happening like you did here with my text . Because i am trying to show you if i get it right and the website just makes the code that I paste in the reply come to life :)). Any way i think i understand what you are saying, amazing explanation, I very much apreciate the effort to reply to me thanks. both of you @jeff_beynon and you @shy_away .

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.