Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

im not sure what’s wrong with my code I’ve double checked it using chatgpt and it seems fine however it did suggest that I should rewrite it like this:

Loving

but not even this is working please help.

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">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>

<!-- User Editable Region -->

           
<input id="Loving" type="checkbox"> Loving <label for="Loving">Loving</label>

<!-- User Editable Region -->

          </fieldset>
          <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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

The id should use loving not Loving.
Same for the for attribute.

Also you have an extra Loving sandwiched in between the input and the label so you should remove that as well.
The only thing in between the input and the label element should be exactly one space character.

1 Like
3

Note - ChatGPT doesn’t actually have any way of knowing if your code is actually correct. Its designed for interacting with natural (human) languages, not programing languages.

1 Like
4

Hello and welcome to the forum @llayey !

Good attempt.

Along with the previous guidance provided about not having two text “Loving”, please check the values of the id and for attributes?

The text for the both the id and the for values should be in lower case ‘loving’.

It is important to use exactly the same case as shown in our examples.

No worries, as we have all done it at some time.

Perhaps, reset the step (it will not affect any of your previously completed steps, only this one.)

Only add the labels around the existing text Loving with the attributes and values.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
5

What I found helpful is understanding how the system marks our work: character by character. So even a space in the wrong place, or a lowercase in place of an uppercase will be “wrong” in this situation, even though in a real life situation it would be fine.

Rereading the question word by word, or opening the same lesson in a new window and going back a few steps, or resetting the current step in the lesson, can all help get you back on track.

2 Likes
6

Thank you for your assistance guys and also fast reply. Hope you all are having a nice day :slight_smile:

1 Like
7

ChatGPT may write code and provide instruction, but it does not execute or evaluate code for accuracy. It is critical to examine and test any code generated before putting it into production.