Coding checkboxes

Can you help? This is correct, I believe and the output shows three checkboxes:

Loving
Moody
Withdrawn

But the freeCodeCamp folk are saying this:
Your page should have three checkbox elements.
Each of your three checkbox elements should be nested in its own label element.
Make sure each of your label elements has a closing tag.
Give your checkboxes the name attribute of personality.

What’s going on?

Hi Nandish,

You should copy/paste your entire code so we can run it to see what’s wrong. Also, for readability, you should blockquote code using markdown. Kind of like opening and closing tags, you use three ``` marks before and after so it looks like this:

var codeExample= "Hello World!"
console.log(codeExample);

Hi Vipatron, thanks for responding :slight_smile: I believe you want this:

‘’’

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor Submit

Loving
Moody
Withdrawn’’’

Nandish

I can still remember that level… here ya go

<form>

     <label>
        Loving
         <input name="personality" type="checkbox">
    </label>

    <label>
        Moody
        <input name="personality" type="checkbox">
    </label>
 
   <label>
Withdrawn
<input name="personality" type="checkbox">
</label>

</form>

In that case you have three checkbox elements :white_check_mark:
your checkboxes are nested in their own label elements :white_check_mark:
all your label have their own closin tag :white_check_mark:
and the checkboxes withe the name attribute of personality… :white_check_mark:

2 Likes

Almost. Those weren’t single quotes, those marks should have been backticks (look in the upper-left corner of your keyboard: ```

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

<lable><input type="checkbox" name="personality"> Loving</lable>
<lable><input type="checkbox" name="personality"> Moody</lable>
<lable><input type="checkbox" name="personality">Withdrawn</lable>```

got it!

copy and paste the code i’ve written, tell me if it helped

2 Likes

@lagdave: If you have solutions to problems, you shouldn’t post them: that ruins the opportunity for others to learn. I know you were trying to help. You should give others the choice by using a spoiler tag, like this: [spoiler] [/spoiler], so that text is blurred.

Surprise!!!

your closing tag is lable, not label! :joy:

Thank you! Lagdace. Vipatron is also checking for me.

@lagdave: Copying and pasting code will not help you, or anyone. You should hand-write the code, especially at the stage at which you are. I recently bought a domain that freed up and wrote the code by hand in about 15 minutes because I’d done things the hard way.

@vipatron… Ive put a checkbox on the things i chnaged to help her understand!

lagdave, I Vipatron noticed I had spelt ‘lable’ wrong as ‘label’!!! I’ve corrected it and freeCodeCamp folks are not dancing !!! Thank you @vipatron and @lagdave

Keep Smiling!
Nandish

Not dancing? Did you pass the test?

I meant ‘dancing’ - my typing is awful, as you saw :slightly_smiling_face:

Thank you Vipatron

1 Like

good for you! now, godspeed!

1 Like

@lagdave, did you understand my point about using the spoiler tag? You are 13, correct? If your friend does your homework for you, do you learn the lesson? Or do you first offer hints, and finally, if he is almost crying, only then do you give him the answer? That’s what the [spoiler]Answer goes here[/spoiler] achieves. I applaud your desire to help: the best learners are those who teach others - but don’t rob people of the chance to learn. You’ll go far, young man.

@vipatron I am like you. I’ve been a uni lecturer and I always taught by getting the learner to see it for themselves. My students used to say: ‘You make things simple.’ It because I used to take them on a step-by-step journey so they experience each step of the learning and knowledge they were gaining. Again, thanks @lagdave - Keep Smiling!

Thanks for that, i understand your point and i admit my mistake… But I have my own strategy in radiating or teaching things to others, if you let them choose wether to look at the code hidden in a spoiler, i, in the other hand give them the complete answer (without explanations) and let them decide if they will analyze it or not! Maybe we have different techniques but the point here is that we help! Thanks again for your concern!

Because for me, its better for you to speak and explain something for yourself rather than being explained by others…