Looking through the forums; Also having a problem with step 55

Here is my code:


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

Link to the challenge:
Learn HTML by Building a Cat Photo App: Step 55 | freeCodeCamp.org

So, I’ve been trying every way to get this code to work, but it seems a bit tedious at the moment. I’ve put my code to the right side of the checkbox but no luck. Any thoughts to be given here per say?

Hello Edlun. It seems that

Has incorrect syntax. The opening tag doesn’t have a >, and the text should be between those two tags.

I tried that already. Yet, it doesn’t work unfortunately. It gives me this error message:

" The text Loving should no longer be located directly to the right of your checkbox. It should be wrapped in a label element. Make sure there is a space between the two elements."

So between the <label> elements, the text Loving should be between them.

Hmm, still no luck. Haven’t got it yet.

Hi @Egaul98 ,

Make sure to add a space between the input element and the label element, for the tests.

But before, nest your -Loving- text in the label element.Like so :

<label for="id"> Text  </label> 

Does your code contain <label for="loving"></label>? And does it contain the correct syntax?

Yes, it has the correct syntax. The issue now is that it needs to be nested within a new label element.

Of which oddly enough it is already nested in between the label elements.

Can you share your code once again ?

Here is the edited code with your input format

The code:

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

Check this again! What I meant earlier is that the value of the for attribute needs to be the value of the input id. And you need to remove the space after the =.

You also don’t need the last word now that you have already nested it in the label element.

Fix these issues and see how it goes now.

Still no luck :slightly_frowning_face: Hmm, I’ll try this since I’ve learned a trick from coding. Usually, if a code/string is too hard or difficult, it’s best to take a break or a rest for a while then come back to it. I think I’ll try to do that. It’s worked for me a couple of times when I first came on here. Thank you for the help though!!

1 Like

Yes, for sure! That works every time.

I just wanna add, since i have noticed that you are a little bit confused about html elements, that :

Whatever you write inside the < and > symbol is called an HTML tag.

<p>   // is an opening p tag 
</p>  // is a closing ptag  

And an HTML element consists of a start/opening tag, then some content, and an end/closing tag. This is a p element :

<p align="center">This is paragraph.</p> 
1 Like

I wrote down all these notes on paper, and yes I was a little confused since I’ve been toiling with this step for the whole day haha. Thank you though for the refresher, I really appreciate it. I’ll try back again tomorrow at the challenge . :slightly_smiling_face:

1 Like

I’ve been working on it all day as well with no solutions and I’ve tried everyones advice.

I’ll try my best to help you all. I think that

should be fixed in many places. First of all, as @spark07 mentioned, the label should have the attribute for="loving" (because loving is the id of the <input>.) Secondly

is outside of the <label></label> tags. Try typing Loving just between the opening and closing tags. I’ve noticed also how

You’ve written loving twice. It only needs to be written once, and it should be capitalized and in between the opening and closing tags. I hope I helped @Egaul98.

1 Like

Don’t beat yourself up too much over it! You’re almost there :clap:
And of course, after focusing for long hours things tend to look very confusing, so always take a break.

@adriannimri, please share your code with us so we can help you.

Basically, we can make an HTML checkbox with a clickable label ( which means the checkbox gets on/off when the label is clicked ) by :

  • Using checkbox inside the label tag :
<!-- Putting checkbox inside the label tag -->
  <label>
    <input type="checkbox"  name="someText"  value="someText"> Text
  </label>
  • Using the for attribute :
<!-- Using the for attribute in the label -->
  <input type="checkbox" name="someText" id="someID" value="someText">
  <label for="someID"> Text </label>
3 Likes

I don’t know how I did it but, your solution worked greatly I am very happy, you don’t believe how happy I am haha. What I’ve done was write the code on a new line, and then I saw the visual representation of your format, so I decided to follow that and it came out correct. Although, what’s more important is not just the visual representation on my end but understanding the attributes, values and how they all come together.

Thank you so much, I’m glad you’ve helped me.

I am happy for you!
I am also glad that did help you. :blush:

1 Like