Learn HTML by Building a Cat Photo App - Step 60

Tell us what’s happening:
Describe your issue in detail here.
I have tried many times but I couldn’t
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">

<!-- User Editable Region -->

<input id="optional" type="radio" name="optional" value="optional">
      <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" name="personality"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>
          </fieldset>

<!-- User Editable Region -->

          <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/117.0.0.0 Safari/537.36

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

Link to the challenge:

The code pasted in above looks like the starter HTML without any changes. Please try again and if it still isn’t working then paste in your updated HTML using the following method so we can see what you tried.

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.

can anybody help me out please?

“Add a value attribute to each checkbox. For convenience, set each checkbox’s value attribute to the same value as its id attribute.”

Maybe you can explain what you don’t understand about these instructions so we know where you need help. You have already added the value attribute to the radio buttons. It’s the same concept to add them to the check boxes.

But if you still need help, then paste in your updated HTML using the method I described above so we can see what you tried.

can you explain this with an example please?

You already have an example. As I mentioned above, you have already added the value attribute to the radio buttons above the check boxes. You can just look at those to see how you did it.

Or were you asking about the triple back tick method for pasting your code in here?

but its still not working

What is “its”? I don’t mean to be rude but I have no idea what your having trouble with because you aren’t being specific enough about what you are trying to do.

If you are having trouble with your HTML then paste it in here so we can see what you are doing. Until you do that then we can’t help you. You need to learn how to do this because almost every time you paste a question in here the first thing people are going to do is ask to see your code.

Please show us what code you have tried!

<input id="optional" type="radio" name="optional value="optional>

You didn’t use the triple back tick method. It is very important that you do so. It allows us to copy/paste your code very easily for our own testing.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Are these the instruction you see?

Add a value attribute to each checkbox. For convenience, set each checkbox’s value attribute to the same value as its id attribute.

1 Like

Where did this come from? You shouldn’t be adding new elements or changing anything that is already there. You are just adding a value attribute to the existing check boxes.

yes that’s it, I have been trying to do it but I couldn’t

If I knew what to do I wouldn’t to looking for assistance please, can you be a little polite please

No man is a compendium of knowledge please.

I asked because your code doesn’t look very much like the instructions.

Can you identify “each checkbox”? You can’t really progress without knowing where the instructions are asking you to make changes.

I didn’t see anything impolite there? “Why did you do X” is a very important question. It helps us understand what you’re misunderstanding exactly.

Please can you help me to identify them please?
I truly appreciate your assistance.