Cat App- step 44

HTML-CSS
1

Hi, I’ve read through other forum posts but just can’t seem to get this. I am getting the error message- “Sorry, your code does not pass. Don’t give up. Your new input element should be above the existing input with type attribute set to text. You have them in the wrong order.”
I am not understanding how they are in the wrong order and what I should do to remedy this? Thanks in advance for any help.

        <input type="radio"> Indoor

type=“text” name=“catphotourl” placeholder=“cat photo URL” required
Submit

2

Please post your full code.

3

Thank you- I tried but I couldn’t work out how to do so- copying and pasting reformatted it?

4

Hi @RachelA ,
It is hard to give a solution without looking at your code (entire code).
Try to post the question with the challenge (link your challenge with the post).

5

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">

<!-- User Editable Region -->

  Indoor: <input type="radio"> Indoor
  <input> type="text" 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

6

Hi @RachelA ,
Just Remove the Indoor: part before the <input...> tag & your code will be fine.

(The DESCRIPTION for the Radio button is applied with Indoor part, AFTER the input tag.)

I noticed another mistake.
Your second <input> tag is written in the wrong way. You have closed the <input> tag, before placing the necessary attributes (type, name, placeholder & required). So put those attributes into the tag.

2 Likes
7

Thank you so much. I think it was the second mistake you highlighted that I was stuck on, as I kept adding indoor randomly when it said it was in the wrong order. Appreciate the help a lot, thank you.

1 Like
8

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