Learn HTML by Building a Cat Photo App - Step 58

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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>
            <legend>What's your cat's personality?</legend>

<!-- User Editable Region -->

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

<!-- 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

You need to add a new checkbox. please what does it mean?

3

Hello!

It means to start a new input element below the one you just added with the type attribute and value checkbox, like your previous one. Then, it gives further instruction to add the label behind the input.

I suggest resetting so you can get the original code back, and enter the new input with the checkbox below that.
I hope this helps you! You are doing great!

4

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label> <input type="checkbox" id="lazy" name="personal"> <label for="lazy"></label> upto now sir

5

Are you saying you got the Loving in step 56 to work for you?

You are doing great!

6

not at all sir, i am still struggling with it

7

Please follow these steps to correctly post code to the forum

I’ve edited your code for readability. When you enter a code block into a forum post, 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

8

I see a leader responding so I will bow out.

Best wishes for more good progress.

9

I would look at this part of the directions again because your code is not following what its asking right now

Also add a label element to the right of the new checkbox with the text Lazy . Make sure to associate the label element with the new checkbox using the for attribute.

10

Your new checkbox should have an id attribute with the value lazy and a name attribute with the value personality . Check that there is a space after the opening tag’s name and/or there are spaces before all attribute names. this is the error message

11

Hi, I am really confused at this point as to why the line of code for step 56/57 is not working for step 58.
Please if there is any technical explanation to that, I would really appreciate if I could get it. Thank you

12

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
13

And I also have to use a different line of code for step 59, please I really need some sort of explanation. Thank you

14

Please stop using other users topics to ask for help with your code. Please create your own topic for that challenge, and be patient for a user to respond. Its not fair for the other user who asked for help with their code.