Learn HTML by Building a Cat Photo App - Step 46

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I think I’m getting wrong
Your code so far

<html>
  <body>
    <main>
      <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">

<!-- User Editable Region -->

          <label><input type="radio"> Indoor</label>

<!-- User Editable Region -->

          <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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello!

This step asks that the attribute id with a value of indoor
be added to the radio button, which is the input in this case.

I have highlight the necessary action words with bold and italic.

Enter it the same as you did the type attribute and its value of radio.

Example:

I hope this helps you.

Happy coding!

3

Pardon me but I’m still quite lost here! Could you explain more?

4

The attribute in question should be added to the ‘input’ element:

...<input attribute="value" ...this is guidance

‘id’ is the attribute,
“indoor” is the value.

Don’t change the rest of the given code line. Just add a new attribute and its value.

When elements have multiple attributes, the order of the attributes doesn’t matter.

5

Taking apart the input element to show how things are added is my hope at helping you find the solution.

< label> < input type=“radio”> Indoor< /label>

Let’s just take the < input type=“radio”> so I can show how you will add the ** id ** **attribute ** and the *value * indoor

The attribute in the input currently is an attribute of ** type** and the current value is a value of ** radio**

The element we begin with is < input> since it is self closing there is not any need for a closing element.

Now, we will add the attribute type and the value radio to the input element.

< input type=“radio”/>

Suppose we wished to add another attribute and value:
for example an attribute name and a value success.
It would be like this:

< input type=“radio” name=“success”/>

You will not be adding the name attribute or success value for this step, but you will add the id attribute and the value indoor.

As you can see, any additional attributes and values can be added without changing the original content.

I hope this helps you!

Happy coding! :slight_smile:

6

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