Learn HTML by Building a Cat Photo App - Step 45

HTML-CSS
1

Tell us what’s happening:
This is what I have to do:

The id attribute is used to identify specific HTML elements. Each id attribute’s value must be unique from all other id values for the entire page.

Add an id attribute with the value indoor to the radio button. When elements have multiple attributes, the order of the attributes doesn’t matter.

How do I do it?

  **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 type="radio"> Indoor</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 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello. The id of an element is an attribute. To set the id of an element to a desired value, you must follow a similar process than that of setting any other attribute’s value. Like the hint says, the order of attributes doesn’t matter for anything other than readability. To add more than one attribute to an element, simply separate the attributtes via spaces. An example of an element with more than one attribute would be:

<input type="password" name="password"/>

1 Like
3

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