Learn HTML by Building a Cat Photo App - Step 60

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
I am unable to successfully complete exercise 60
I have redone it 3 times . what am I missing

<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 -->

          <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>
            <input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label> 
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
             <input id="energetic" type="checkbox" name="personality" value="energetic"> <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/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

Link to the challenge:

2

I could really use some assistance with #60 I have done it 3 times and still have not done it correctly

1 Like
3

You have doubled code lines with type attribute set to the value of “checkbox”.

Restart step.

This is what you get in this challenge:

image
image1074×509 55.4 KB

Now, take a look at your solution.

4

Evidently in adding the value attribute is my problem

5

This is snippet from your code. You have added the ‘value’ attribute for the last three code lines and that is OK. But the previous three lines are surplus there.

6

yes exactly what I did but yet kept receiving “Sorry code did not pass”

7

Post the code again here.

8

I am struggling still with Step 60 about cats. I don’t want to quit, this one is difficult. I have re-done this several times

9

When you enter step 60 you get the following:

image
image1549×708 84 KB

I have underlined three html elements in which you have to add the ‘value’ attribute set to the same value as their ‘id’ attribute. So, if the input’s ‘id’ has a value of “lazy”, add the ‘value’ attribute set to “lazy”. Do the same for all three ‘input’ elements.

10

I have but for some reason it says it isn’t correct each time…I am ready to pull my hair out. where is value go ? after name or before

11

Can you post your new code here so we can see whats going wrong

12

how do I do that? I am not sure

13

When you reply you will see a button that looks like </>. Select the button and paste all your code between the two lines it gives you.

14

Test

Sorry, your code does not pass. Keep trying.

Hint

All three checkboxes should have a value attribute. Check that there is a space after the opening tag’s name and/or there are spaces before all attribute names

15

That is the error you are getting but we need the actual html code to see what you are doing. @DobarBREND has suggested some issues to fix, and if you have attempted to fix those then we need the new code you added to so we can see what issue is still on going. You can click inside the challenge code press ctrl+a to select all the code then press ctrl +c to copy it. Then using the button I mentioned about click in between the lines and press ctrl+v to paste the code in

16

where do I find it as this is all I see

17

Where do you find the button to use? I have circled it in the screenshot below. You should see it there after selecting the reply button

image
image1012×562 17.6 KB

18 
Skip to content
Search
Search 9,000+ tutorials
Donate

Menu
(New) Responsive Web Design
Learn HTML by Building a Cat Photo App
index.htmleditor
ConsoleHide the previewPreviewMove the preview to a new window and focus it
504849
Step 60
Like radio buttons, form data for selected checkboxes are name / value attribute pairs. While the value attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page.

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

        <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>

Test
Sorry, your code does not pass. Keep trying.

Hint
All three checkboxes should have a value attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.


Navigated to Step 60
19

You only shared the code for the radio buttons, we need to see the code for the checkboxes. Here is a screenshot of what your challenge screen should look like. On your screen, click inside that box where the code is. Press ctr+a to select all the code, then press ctrl+c to copy all the code you selected. Finally, in the reply with the button I showed you, you would press ctrl+v in between those to lines so it pastes all the code you copied

image
image1131×718 65.9 KB

20

Can I just copy and paste the work I am stuck on ?