Tell us what’s happening:
Describe your issue in detail here.
Nothing I have tried so far is working. I thought I had a decent handle on this but I’m starting to go cross-eyed trying to figure out what I am doing wrong here. Any assistance would be greatly appreciated.
**Your code so far**
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>
<h3>Things cats love:</h3>
<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>
<h3>Top 3 things cats hate:</h3>
<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>
<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>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox"><label for="Loving">
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/184.108.40.206 Safari/537.36
Challenge: Learn HTML by Building a Cat Photo App - Step 55
No worries, it is complicated the way they’ve described it.
So let’s unpack the instructions (I’ve quoted your answer above for ease of reference as well)
The last part of the instructions say:
Associate the text Loving with the checkbox
by only nesting the text Loving in a label element
and place it to the right side of the checkbox input element.
And the original code they gave was:
<input id="loving" type="checkbox"> Loving
So first they are referring to “the text Loving”, so clearly that is the last word in the given code.
They also say “associate [Loving] with the checkbox”. But how? We will come back to that in a bit.
Then they talk about a “label element”. Well what does that look like?
So the label element has two parts. Does your solution use two parts to the label element? (check)
(btw. the word ‘nesting’ then means to put the word Loving inside something)
Next, they said to place it to right of the checkbox input element. You have done that.
However, if you look carefully at the original line of code there is a space located between the input element and the word Loving. In your solution you have removed that space. So try to put that back in between the input element and your (corrected) label.
Finally, let us talk about the ‘for’ attribute. You’ve used it which is definitely what the question wanted but your tag is pointing to something called “Loving”. What we want is to make an association between the label for Loving and the input checkbox to its left.
So that means the for attribute should link between the current label “Loving” and the associated input’s id. Here’s that check box code again: <input id="loving" type="checkbox">
Notice the id element? It is “loving” So then use that instead of “Loving” in your for-attribute and you will have a proper association.
fix the label element (it should have a left-side and a right-side with the word Loving in between)
add back the missing space
fix the for attribute to point to the id of the associated check-box