Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

I have researched and my code works and seems to be correct only get the incorrect every time try and submit

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

That is a very good try but the only mistake is that you changed the text Loving to loving.

3

The only thing thats wrong is you haven’t capitalized the word “Loving” for your input text.

It should look like this:

<input id="loving" type="checkbox">
 mod edit : code removed
4

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

5 
removed

Its “Loving”, not “loving”. Pay attention to capitalization of the first letter

6

Ahh, I see.

I just found that your reply wasn’t very clear, in the sense that at first read, it didn’t seem like any text had been changed. I was just trying to clarify that it was specifically a capitalization issue that was the problem, and clarifying which “loving” needed to be capitalized instead.

It seems to me that your response is just as “spoiler” as mine is, excepts it’s not as clear. You also did the work for them, by telling them which exact word needed to be changed.

Am I wrong in thinking that a better response to this question, in terms of avoiding spoilers, is to say,

“Everything is accurate, except you’ve left a certain word uncapitalized, which is what is triggering the check to return as incorrect.”

This would actually let them solve the problem.

7

This seems very much like solving the problem to me also.

8

I see your point here, but it’s just a policy against posting verbatim code like this to avoid spoilers for other people.

If someone else had the code wrong and found this forum post they could just copy/paste the code.

In this case, it’s just a capitalization problem, not really a code/logic issue, so I think it’s ok to point it out exactly. Although I think being vague would be fine as well. Looking for typos character by character is unfortunately sometimes part of programming.

9

Okay, thank you for clarifying for me. I apologize for violating a policy. I’ll be more careful in future posts.

1 Like
10

Welcome to the forum and thanks for taking the time to help people!

11

Tried this; still no luck

12

please post the new code in your reply to us so we can give more hints as needed.

1 Like
13 
   <input id="Loving" type="checkbox">
        <label for="Loving"> loving</label>

It says my checkbox element is not present

14

The original text given for this input was Loving and it was placed on the right of the input element.

Now, after you modified the code, what text is placed on the right of the input element?

You want to fix that so it says Living again.

You also want to make the for attribute have the exact same value as the id attribute of the corresponding input.
In your case, you modified the value given originally in this step from loving to Loving so the test is confused and can no longer find it.

If you want, you can undo the changes by clicking reset and trying this step again.