Building a cat photo app

HTML-CSS
1

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-56

  <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>
<input id="loving" type="checkbox"><label for="loving">Loving</label>

It will not take what I put in, what am I doing wrong?

2

The tests can be very picky about spacing. There was originally a space between the checkbox input and the word Loving. You removed that space. The tests expect it to be there. So you need to put it back.

Always try to preserve the original spacing unless asked to change it in the instructions.

3

OK so i added the space…

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

Still does not like me

4

Is there any other way you could add that space back? Read the instructions carefully:

“…by nesting only the text Loving in a label element”

This means that there should be no extra spaces inside the label element.

5

Did that, i swear it hates me… but I am going to make it love me

6

Is my code correct? If so, how do we proceed? Possible bug?

7

I don’t know. Show us what your current code is? I’m assuming you changed it since the last time.

8 
<fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox"><label for="loving">Loving</label>
			</fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

I removed the space after the label element and Loving

9

Yes, you removed the extra spaces inside of the label which is good. But you still have removed the original space that was there after the checkbox.

10

Thank you very much!

11

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