Learn HTML by Building a Cat Photo App - Step 56

Tell us what’s happening:
Hello, im being told i need to wrap the text “loving” in a label element. however. ive tried every which way i can think possible and its still not working. Any advice would be greatly appreciated
Thankyouu :slight_smile:

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>
           <label/><input id="loving"for="loving" type="checkbox">Loving</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your mobile information:

SM-G998B - Android 13 - Android SDK 33

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

Link to the challenge:

Hello.

Several things:

1.- You should put first the input and then the label
2.- The atributte for isn´t of the input element. This attribute is of the label
3.- Between the closign input tag and the opening label tag, should be a space.

Try this. Check your code.

Grets.

Thankyou for the response, ive tried to follow your description and been unsuccessful, as i can’t close the label.

Hello.

Can you write your code now?

Grets.

Please paste in your updated HTML using the following method.

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.

Hey @rakan.ajlouni, I know you are new here, so this is just some friendly advice. We don’t post full code working solutions in here. We try to help guide people to finding the answers for themselves, not just give them the answers.

4 Likes

Hey, sorry yes I am new, should I delete the answer?

Yes, that would be best.

1 Like

Hello dear @Otl_mink , I would recommend that you read the step carefully, it says wrap the text loving in a label element. reading it carefully would solve the issue there!

Hope it helps! :grinning:

2 Likes

Hello, thankyou for your responses ive tried to “wrap” the text Loving in a label element but the code is still invalid so im assuming its wrong. I shall persist:)

Any time you try something new with your code you need to paste it in here to show us what you did. Be sure to use the triple back tick method I gave you above.

So I’ve followed instruction and created a label tag outside of the input tag with the text loving inside, leaving a space after the close of the input tag. However the for attribute still isn’t working and im unsure why.

Any advice would be greatly appreciated.
Please excuse my incompetence :slight_smile:

Okay thanks i will do that now

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

Im sure I’ve formatted it incorrectly, for some reason i cant send all of the code. Its either the line im working on, or the rest of it.
Hope this makes sense.

“nesting only the text Loving in a label element”

Is the text Loving nested in the label element?

Also, attributes go on the opening tag of the element.

@Otl_mink also be sure to enclose an attribute’s value in quotation marks.

You don’t technically have to use quotation marks if there are no spaces in the value. But it’s probably a best practice to include them.

Side note, I tried to pass this step without quotes around the value and the tests got confused and wouldn’t pass it. Technically, that’s a bug in the tests. But if you want to pass this step then it looks like you need to use quotes around the value.

Hello.

You almost got it!

The attribute for and its value, should be in the opening tag of label and the text Loving should be between the opening and closing tag of label

i give you an example:
<input type="radio"> <label ATTRIBUTE="VALUE">Text</label>

Review the example and adjust your code.

Grets.

1 Like

6 posts were split to a new topic: Learn HTML by Building a Cat Photo App - Step 56

Tha you all so much! :slight_smile: we got there in the end.