Learn HTML by Building a Cat Photo App - Step 60

HTML-CSS
1

Tell us what’s happening:
Hello, here i am again constantly stuck. its never ending, when is this supposed to be easy?

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

          <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 1" name="personality"> <label for="loving">loving</label>
            <input id="lazy" type="checkbox 2" name="personality"> <label for="lazy">lazy</label>
            <input id="energetic" type="checkbox 3" name="personality"> <label for="energetic"> energetic</label>
          </fieldset>
          <value> id="loving" type="checkbox 4" name="personality" value="loving" 
          </value>

<!-- 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/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

You are trying to use value as an element, but its an attribute

Attributes go inside the element opening tag. Take the checkbox I showed you in the last challenge

<input type=“checkbox”>

In this example, the element is input and the attribute is the type. The attributes
always go right after the element.

So reset once more, find your checkboxes and try adding the value attribute to the checkbox.

3 
<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="1checkbox" name="personality"> <label for="loving"> loving</label>
            <input id="lazy" type="2checkbox" name="personality"> <label for="lazy"> lazy</label>
            <input id="energetic" type="3checkbox" name="personality"> <label for="energetic"> energetic</label>
          </fieldset>
          <value> new="checkbox" set="loving" name="personality"> loving></value>

this is just beyond dumb. i dont get it

4

and then it wont show the code. sorry all of this is not helping at all. I am seriously trying here

5

Nave min Firat Gur, Nava ta chia…

I know you dont know that language, but thats how i feel reading checkbox attribute with a wrapped element<–no clue what that means i made it up.

<elem(attribute)ent></elem(attribute)ent>

I know you are trying I am so sorry Cody.

6

Type is always going to be checkbox every time . You could have 100 checkboxes and the type is always just checkbox

You are still trying to use value as an element, but as I showed in my example it shouldnt be used like this

Here is another example

<input type=“checkbox” value=“ “>

Here is how a value attribute is added to an element. Its the same way we worked through on adding the for yesterday.

You need to give the value the text the directions say, and you need to add that to all your checkboxes

I just got off work so I am headed to the gym right now. I will be on later if no one else has been able to help you out.

7

enjoy, thanks again for trying. I should probably just give up. Instead of wasting everyone time when they could be doing real work instead of helping me on stuff kids do in their sleep

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

JUST KILL THIS POST PLEASE.

10

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

11

Coding isn’t easy. It’s hard stuff.

12

Jeremy,
Whatever you sent I do not understand at all. Sorry Like i keep saying I am trying

13

sorry now i am beyond lost. I just wanna be done…with everything. I am so lost i cant find anything. I am just start typing random stuff in it.

14

I need help because i am beginner and i don’t understand anything

1 Like
15

I am with you. So lost i cant get home

16

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
17

make an individual free form post. That is what i did and it was explained. I am so new i will get you lost. Just ask a moderator. I am still lost

18

I made two replies.

The first shows you how to make your code show up when you post it.

The second reply says that code is hard, not easy. Whoever told you it’s easy is incorrect.

1 Like
19

might wanna have a discussion about ease when they are advertising this freecodecamp thing. All the commercials say its easy and land a job in 30 days. But i did get to 63. They could honestly word some of these better. I have to read them over and over to even understand the value of the sentence.

20

I am aware of absolutely zero advertisements by freeCodeCamp that say you can get a job in 30 days. That would be a total lie. I generally tell people that they need to get equivalent knowledge to be competitive against graduates of 4 year universities, and to expect that to take time.

1 Like