Learn HTML by Building a Cat Photo App - Step 58

HTML-CSS
1

Tell us what’s happening:

Hi everyone, please i need help on scaling through step 58… i have done everything within my powers to see how i can get solutions to it, but keeps frustrating me by always coming up with erros.
Please below is the latest code i came up with and i want you yo please help me with corrections if any.

Loving

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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"> Loving
            
<input id="loving" type="checkbox" name="feeling" value="loving">
<label for="loving">Loving</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/109.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 58

2

Welcome to the forum @james2020

image

You have two sets of input elements and text.

Please remove the input element containing extra attributes, and one set of the text Loving

Happy coding

3

Still isn’t working sir… See what it’s telling me after inputing these codes `

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

" Your label element should be located after your checkbox."

:face_exhaling:

4

you should try to follow what people tell you…
you still have two input with ID of loving

5

Thank you sir i just tried this…

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

But still doesnt pass. see what its telling me below

“Your label element should be located after your checkbox”.

6

don’t call me sir

is that all the code you have? it fails if you have an other input

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 (').

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

There are other codes i created trying to answer the question, but has been edited to arrive at this one here. don’t know if i can ever get past this stage.

8

There should be a space between your checkbox and your new label element.

9

This frustrated me too just needs a space (I know a bit finnicky but we are learning clean code from the get go). You got this! Doing great.

code removed by moderator
10

hi @Mitakayo

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
11

Can you help a brother out of this bro?

12

hi @james2020 please open your own topic to ask for help

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 Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The 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.