Learn HTML by Building a Cat Photo App - Step 47

HTML-CSS
1

Tell us what’s happening:
Hey there. I believe I have entered what is required to be entered for the outdoor radio button, but it still gives me an error. Can someone tell me what I’m doing wrong, please?

Your code so far

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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">
          <label><input id="indoor" type="radio"> Indoor</label>
          <label><input id="outdoor" type="radio"> Outdoor</label>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS armv7l 12105.100.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.144 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 47

Link to the challenge:

2

You have the input element nested in the label element. I believe the label is supposed to come after. If I’m not mistaken, the label elements should also have a “for” attribute with a value that matches the id of the input that they are a label for.

That was kind of a mouthful haha. Hope that helps.

3

Heya Daniel,
Firstly, thanks for taking the time to respond to my message :smiley:
Based on the instructions given in step 47 (step 46 for others apparently?), I’m not seeing how your info correlates in all honesty.
The instructions were:

Step 47
Create another radio button below the first one. Nest it inside a label element with Outdoor as the label text. Give the radio button an id attribute with outdoor as the value.

Basically, it’s saying to copy the previous radio button, which is:
<input id=“indoor” type=“radio”(>) Indoor (ignore brackets)

and replace “indoor” with “outdoor”, but no matter how I change it up it still gives this error message:

Test

Sorry, your code does not pass. Don’t give up.

Hint

You should not make any changes to the Indoor radio button. You can restart the step to get the original HTML back if needed.

I searched multiple forums here but saw nothing of help. There was a youtube video I saw which was basically a walkthrough and it two people had the same issue in the comment section tho, but there was no follow-up.

So currently I’m stuck. Maybe I’m just dumb and missed something and am just making this way too complicated, but I’m honestly at a standstill right now.

4

I had trouble with this one XD

theres a few pit falls,

you have to have the capital spelling of Outdoor between opeing and closing tag
< tag > Outdoor < tag >
and the id is to be the lower case spelling
< tag attribute=" outdoor" >

sometimes it helps to check your spacing

1 Like
5

I tend to space in this way < >no space word space < >
its possible that could be your only problem, or simply no spaces at all around the label

6

Please post your latest code if you still need help

8

Hey hbar1st. What is posted above is still my latest code.

9

I looked at the other step after this one and it turns out I actually had the right code, but even when I copy and pasted that code or type it word for word it still doesn’t work…is it bugged out or something?

10

Your solution works for me. Please try one of the following steps to move forward.

  • Click on the “Restart Step” button and force a refresh of your page with CTRL-F5 then try to paste the code in again.

  • or - Try the step in incognito or private mode

  • or - Try a different browser or disable browser extensions that may interfere with the test.

We hope one of these will work for you.

11

Hey hbar1st. Sorry for the late reply.
I borrowed another laptop (HP), logged onto the website, and try doing it again, and it surprisingly worked. I still used the same browser, Google Chrome, but for whatever reason, it worked on the HP laptop. My only guess for it not working on my laptop is because the website somehow bugged out on me or because I’m using an older Chromebook model…? Though, I don’t think that should affect anything.
Well, at least it worked, and hopefully, I won’t have any more issues like this. Thank you very much for assisting me, hbar1st along with daniel314 and Guided :slight_smile:

12

Make sure you browser is up to date on the older laptop and disable all extensions.

13

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