#47 Cat Photo App - Step 47 SOS

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Step 47

Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value.

Add the name attribute with the value indoor-outdoor to both radio buttons

  **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>
      <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><name><input id="indoor" type="radio" name="indoor-outdoor"</label></name>
        <label><name><input id="outdoor" type="radio"name="indoor-outdoor"</label></name>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
</body>
</html>

Hint

Both radio buttons should still be located between opening and closing label element tags.

Link to the challenge:

Please halp me - idk what I’m missing

2

<input id=“indoor” type=“radio” name=“indoor-outdoor”
<input id=“outdoor” type="radio"name=“indoor-outdoor” I tried this

3

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

1 Like
4

I added opening and closing labels to my code but it is not reading

6

I have found another solution and tested the code as well.
It says to create another radio button below the first radio button.
So, just use the code for the second radio button which we used it for the first one.
For instance,

Indoor (!--TODO: name of the label--) Outdoor (!--TODO: name of the label--)
7

Make sure that the id attribute is lowercase and the element starts with a uppercase.