curriculum/challenges/english/blocks/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.
Add a legend element with the text Is your cat an indoor or outdoor cat? above both of the radio buttons.
Your legend element should have an opening tag. Opening tags have the following syntax: <elementName>.
assert(document.querySelector('legend'));
Your legend element should have a closing tag. Closing tags have a / just after the < character.
assert(code.match(/<\/legend\>/));
Your legend element should be the first element right below fieldset element's opening tag and before the first radio button's opening label tag. It is not in the correct position.
const fieldsetElem = document.querySelector('fieldset');
const fieldsetElemChildren = fieldsetElem.children;
assert(
fieldsetElem.firstElementChild.nodeName === 'LEGEND' &&
fieldsetElemChildren[1].nodeName === 'LABEL' &&
fieldsetElemChildren[1].children[0].nodeName === 'INPUT' &&
fieldsetElemChildren[1].children[0].id === 'indoor'
);
Your legend element's text should be Is your cat an indoor or outdoor cat?. You have either omitted the text, have a typo, or it is not between the legend element's opening and closing tags.
const extraSpacesRemoved = document
.querySelector('legend')
.innerText.replace(/\s+/g, ' ');
assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<section>
<h2>Cat Photos</h2>
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
<a href="https://freecatphotoapp.com"></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<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>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
--fcc-editable-region--
<fieldset>
<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>
--fcc-editable-region--
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>