Learn HTML by Building a Cat Photo App - Step 44

Tell us what’s happening:

I tried this code but it doesn’t get accepted as the right solution. What’s wrong with it?

This is the instruction:

Step 44

You can use radio buttons for questions where you want only one answer out of multiple options.

Here is an example of a radio button with the option of cat: <input type="radio"> cat. Remember that input elements are self-closing.

Before the text input, add a radio button with the option set as:

Indoor

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>

<!-- User Editable Region -->

        <form action="https://freecatphotoapp.com/submit-cat-photo"
        <input type="radio"> Indoor
          <input type="submit name="catphotourl" placeholder="cat photo URL" required>

<!-- User Editable Region -->

          <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.0 Safari/605.1.15

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 44

You accidentally removed the ending > on the form tag above the input.

Try real hard not to make any unexpected changes. Even the slightest unexpected change can cause the tests to fail.

1 Like

I fixed it and it still says that " You should create an input element for your radio button. Check the syntax."

Whenever you make changes to your code and it doesn’t work and you want additional help then you need to paste your updated code in here using the following method so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
   <input type="radio"> Indoor
   <form action="https://freecatphotoapp.com/submit-cat-photo"> 
      <input type="submit name="catphotourl" placeholder="cat photo URL" required> 

that’s what I tried so far, checked spelling etc

What happened to the text input that was already there? You are supposed to put the new radio button input right before that text input. Instead, you put it before the form.

I think you need to reset the step to get the original HTML back and then don’t make any changes to what is already there. You are only adding one new thing, a radio button and its text label.

UPDATE: Oh, I see, the original text input is there but you changed the type attribute on it to submit, which is why I didn’t recognize it. Again, don’t make any unnecessary changes to what is already there. Only add the new radio button.

Hey, thanks, I placed it under the form. I kinda had to re-freh the lesson to make it work. My code was fine (besides the misplacement). Guess it was a big hung-up.

1 Like