Learn HTML by Building a Cat Photo App - Step 49

Tell us what’s happening:
Hello, I can’t get past step 49. I have tried all possible best and I have even searched the internet. Value attribute haven’t been taught and thus, I don’t know where or how to add the requested value attribute. It looks like the task is placed there just to make it hard because there are no pointers or clear explanations as to how to get a clue to solve the code. It just says add the value attribute to both. I have changed the id coz I know ID is an attribute and =“” within this quote add the value. How, then, do you make it easy to find a value attribute? I know coding is challenging, but not with questions that have no example or clue on what to find out or to do. I have read other learner stuck on the same step which shows that it’s place there in that direction to be difficult to solve. Maybe am wrong, but am curious and willing to learn.
Kindly help, please. Thanks

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

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

<!-- 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

Its important to read the directions carefully. The directions say

" set the button’s value attribute to the same value as its id attribute."

So if the id value is “indoor” what should you have for the value?

Same thing for outdooor

Thanks for the response. That wasn’t given in clear terms as other instruction I have followed to get to that stage. I read the question carefully and I started asking myself if I should insert a button element tag or not but that was a question I was asking myself just to solve it coz am confused, we didn’t add a button tag after label so far. sp it’s really not clear. and I don’t know where should I add the button tag.

You’re not setting a button anywhere. The first part of the directions say

" Add a value attribute to both radio buttons"

Then says
" For convenience, set the button’s value attribute to the same value as its id attribute."

Its not telling you to make a button its referring to the radio button in the first part of the directions. Currently your values in the provided code are not correct and thats why it doesnt pass

Which value? how many values need to be set? id=“indoor” value is indoor, what other things need to be set value? this stuff is now clearly put.

what do the directions say?

" Add a value attribute to both radio buttons. For convenience, set the button’s value attribute to the same value as its id attribute."

So where else should you check the value? Not sure of what you changed yet but in the code you first provided

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

Indoor is not the same as indoor
Outdoor is not the same as outdoor

I have done the same things over and over before I reached out for help. It’s English and I teach it. I knew I followed as directed but it didn’t pass me. I have tried the alternatives you sent me and I still didn’t get pass. Even though the curriculum haven’t teach me that I can use value as value=" I found out that myself just to pass it. Yet, I am still there now. I have check the initial capital letters and ensure all items typed correctly. nope!

Share your new code

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 (').

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

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

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

<!-- 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

Why did you change the capitalization of the id?

The directions say
" set the button’s value attribute to the same value as its id attribute."

Meaning the value needs to be exactly like the id, and the challenge gave you the id to be lower cased. They should not be changed. The value changes

///

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

///

id needs to be lowercase, but you changed them to be uppercase. Once the id are lower case the values needs to be lower case as well

How about now? still the same.

///

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

///

Not trying to sound mean, but are you reading my responses?

Yeah, I do read them and I appreciate your patience. This stuff can be really frustrating which further point out the reason a dedicated person need a paid bootcamp where one can get access to a 1to1 mentor or guide or teacher to show and teach certain thing and explain better for better clarification. I joined the coding just last night through an advert on TikTok,. And I have moved upto to 76% on day one. I didn’t sleep since last night till now 7 am in the morning coding. That shows my strong determination to learn it. I have checked my coding again and checked the initial letters and it has been accepted. THANK YOU. I just think any dedicated person will definitely need a personal tutor at some point coz, that was tough and wasn’t very well explained.

1 Like

This makes it much, much harder to accomplish coding! Get some sleep!

This stuff is hard and can be really frustrating! The whole point of the forum is to give you free tutoring!

3 Likes