Learn HTML by Building a Cat Photo App - Step 54

      <legend>What's your cat's personality?</legend>
          <input type="checkbox"> Loving

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 54

Hello and welcome to our forum!

Can you post a complete version of your code?

Tell us what’s happening:

I’ve spent way too much time on this problem, can someone help me with what I’m missing? I had to make a new post to show my whole code as it wouldn’t let me add it to my first post as an edit or a reply

Instruction: Under the legend element, add an input with its type attribute set to checkbox and give it the option of: Loving

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>

<!-- User Editable Region -->

          <legend>What's your cat's personality?</legend>
              <input type="checkbox"> Loving

<!-- 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/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 54

Unfortunately not it seems, it wouldn’t let me add it with an edit or as a reply so I just made a new post with the whole code.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Your code passes all tests on my end. Can you try the following.

  1. Reset the lesson, then run the same code again.
  2. Some browser extensions may prevent your lesson from passing, disable browser extensions.
  3. Use a different browser.
  4. Ensure your browser zoom level is set to default.

Hello @Ambi !

When I click on the link provided with this code, I find that Step 54 asks us to enter a new fieldset element below the current one.

Perhaps, reset the step and try again, or submit the question from the Step you currently on, please?

1 Like

Hello @Ambi !

Here are the instructions for Step 54 directly quoted from the lesson in the course.

"Next, you are going to add some new form input elements, so add another fieldset element directly below the current fieldset element."

1 Like

@GrannyIsA-Dreamer - just wanted to let you know - I believe the step is step no. 56, if that helps any.

Yes, that maybe the reason for the issue as well. Make sure you’re on the correct step.

Happy coding!

1 Like

I reset the lesson and ran the code again but this time nothing is happening when I click “check my code”. I see it working in the preview so it’s something wrong with my browser I think. I disabled extensions and checked zoom was at default. I’m on Google Chrome and freecodecamp.org isn’t loading on Safari

1 Like

It says step 54 for me, here’s the full text and instruction:

Forms commonly use checkboxes for questions that may have more than one answer. The input element with a type attribute set to checkbox creates a checkbox.

Under the legend element you just added, add an input with its type attribute set to checkbox and give it the option of:

Loving

Can you try firefox and see if the problem will be solved?

2 Likes

Hmmm, is this the step you’re referring to?

2 Likes

Yeah weird, it says step 54 for me

2 Likes

Yes, as @stephenmutheu says, try a different browser and let us know if you have different results.

BTW, I’m using Safari.

2 Likes

I installed firefox and logged in and when I resumed the project it has me at step 12, so I’ll do it again and we’ll see

You should be able to skip ahead to that step by clicking on it…?

1 Like

Keep up your good progress, and as nickrg stated, all of your previously completed steps should still be saved, if you wish to advance to Step 56 and try it again.
It may just work from the new browser. :slightly_smiling_face:

1 Like

Ah ok silly me… yeah on firefox step 54 is a completely different step. It’s step 56 now and the code just worked.

3 Likes

Yay! Glad to hear. (this post must be at least 20 characters long)

3 Likes