Please assist a brother out here

Please assist a brother out here
0

#1

Tell us what’s happening:

Your code so far


<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></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">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    <label>
    <label for="indoor">
      <input id="indoor" type="radio" name="indoor-outdoor">
    <label for="outdoor">
      <input id="outdoor" type="radio" name="indoor-outdoor"> 
      </label>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons


#2
<label>
    <label for="indoor">
      <input id="indoor" type="radio" name="indoor-outdoor">
    <label for="outdoor">
      <input id="outdoor" type="radio" name="indoor-outdoor"> 
</label>

Not sure this is the only thing but you got a lot of <label>'s and not a lot of </label>'s

Edit: the second part of what @TraekWells said about having a label around each radio button is super important too


#3

I won’t give you the answer to this challenge but I would say to pay attention to your label tags. You need to close each one and make sure each individual radio input is nested inside it’s own label tag.


#4

Thank you for the tips. Could you at least explain to me what it means to be “nested”. Thank you.


#5

It means having one or more elements inside another,
Ex:

<parent>
    <child1>
    <child2>
</parent>

The child elements are nested inside parent element.

Hint for you: label is the parent to input element


#6

Please, can you help here?


#7

What you have done is,

<parent>
    <parent>
        <child>
    </parent>
</parent>

But what it needs is this,


<parent>
    <child>
</parent>

Again, parent is the label

And in your first post you had a correct structure of the input element like this,

<input id="outdoor" type="radio" name="indoor-outdoor">

But for some reason you have changed the structure when i saw the screenshot


#8

One of your radio buttons should have the label indoor


#9

For the label with for=“outdoor”, you should place a text ( outdoor ) after the input element inside that label,

<label for="outdoor">
    <input id=""..... >Outdoor
</label>

Similarly do this for label with for=“indoor”


#10

Thanks…


#11

This is the example given by the instruction on the left side,

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>

Do the exact same thing in your code, and in place of indoor, you have to create outdoor

Remove these <label> and the </label> one at the starting and other before </form>

EDIT: Place your <button></button> before </form>