Rahaz
August 3, 2024, 5:36pm
1
Tell us what’s happening:
i have tried but the code as per the description but this seems to be an issue
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">
<label for="loving">Loving</loving>
<!-- 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/122.0.0.0 Safari/537.36
Challenge Information:
Learn HTML by Building a Cat Photo App - Step 56
good try but the </loving>
is not valid html.
You should try </label>
instead
1 Like
The issue is that your code isn’t quite correct. You should not change the whitespace in between the checkbox and the word ‘Loving’.
And you have a typo.
Rahaz
August 3, 2024, 5:41pm
4
hello @hbar1st ,that is a silly mistake from my side I have changed it <input id="loving" type="checkbox"> <label for="loving"> Loving</label>
Still I’m getting the same error
that is a good try again.
Just remove the extra space inside the new label element.
it should only contain Loving with no spaces
Rahaz
August 3, 2024, 5:43pm
6
hello @JeremyLT , i have tried all combination of spaces , im still stuck in the stage im currently using <input id="loving" type="checkbox"> <label for="loving"> Loving</label>
, if there are any white spaces issue please guide me in this thanks
You shouldn’t try ‘all combinations’ of spaces. There was only one space there originally so that’s all the spaces you get to work with.
Rahaz
August 3, 2024, 5:48pm
8
@hbar1st , @JeremyLT , i understand, im using this code with your advice <input id="loving" type="checkbox"> <label for="loving">Loving</label>
, please look into it and update me,I’m still failing
Rahaz
August 3, 2024, 5:54pm
10
<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>
<input id="loving" type="checkbox">[spoiler]<label for="loving">Loving</label>[/spoiler]
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>
``` this is my code @jeremyLT
please click reset and just copy the one label element in that you made.
Maybe the step is not passing because something else was changed by mistake.
1 Like
Rahaz
August 3, 2024, 6:12pm
12
@JeremyLT , @hbar1st , I don’t know what the issue is I tried it in an incognito mode and it passed, thanks for the quick and resourceful help
2 Likes
That means you likely have some browser extension that’s interfering with the tests.