Learn HTML by Building a Cat Photo App - Step 37

HTML-CSS
1

My code seems to be wrong, however the instructions are just to nest an input element in the form element and I can’t seem to find the right code. Any help please?
(the code seems to work in the preview as the input appears, could this be a bug?)

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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">
          <input>
        </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/16.1 Safari/605.1.15

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

Link to the challenge:

2

This works for me. Try to reset and redo it as maybe you accidentally changed some other line.

3

Thanks for the reply. I have been trying for a couple of days to reset the lesson and redo it, closed it and opened it again, went back a lesson, nothing seemed to work.

4

Just to confirm, you tried to click the button that looks like an arrow turning? (The reset button)

5

Yes exactly, because I also wasn’t sure if I deleted some code accidentally. So I reseted a few times using that reset button, and still didn’t work.
When I checked at other topics, I saw that the code was different and the instructions for this step were different, so I’m not sure what to do.

6

Also, the hint I keep receiving is: " Your form element’s opening tag should only have an action attribute. Remove anything else you may have typed in it."
However there’s nothing else than the action attribute in my form’s opening tag.

7

Can you click reset and before modifying anything, copy the code in the editor here for me to see what you see at the start?

8

So here is the full code when the lesson is reseted. Only the 3 last lines are relevant for this step.

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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">
          
        </form>
9

At this point if you click check button without typing anything it says to create the input element?

10

Exactly, it says: " You should create an input element. Check the syntax."

11

Okay now type <input> in the blank line as you did before and check?

12

Still got the error message…

<form action="https://freecatphotoapp.com/submit-cat-photo">
          <input>
        </form>
13

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

14

The code worked when I changed my browser. Thanks a lot for your help!
Have a good day :slight_smile:

1 Like
15

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