Learn HTML by Building a Cat Photo App - Step 49

HTML-CSS
1

Tell us what’s happening:

Hello folks,

Hopefully you are having a wonderful day so far.
Can you help me out with this one ? I cannot find my mistake in the last section, right before you can see the whole code.

The exercise is:

"If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button’s value attribute to the same value as its id attribute."

There is also a hint:
“Both radio buttons should still be located between opening and closing label element tags.”

In following section:
Indoor
Outdoor

Thank you in advance!

Your code so far

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

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

Link to the challenge:

2

You should add another attribute to the value of indoor-outdoor

Is there any hint for the attribute when you can’t pass this step?

It is good to make sure the value is all lower case for indoor and outdoor

3

Hello hartatociptajaya,

Can you give me an example on how you would write this code?

The hint is:
“Both radio buttons should still be located between opening and closing label element tags.”

Maybe you can make time to reread the first post I made, just in case you missed some information.

4

PS:

It’s all lower case now. That doesn’t seem to be the issue.

5

try to reset the code so you can go back to this

          <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

then add the value attribute only.
Make sure the value of the value attribute is identical to the value of the id attribute

6

Dear hbar1st,
dear hartatociptajaya,

thank you for helping me out with this one and replying.
I do hope that the two of you are having wonderful holidays, however you chose to spend them.

Have a nice day!

2 Likes