curriculum/challenges/english/blocks/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
Add a final checkbox after the previous one with an id attribute value of energetic. The name attribute should be the same as the previous checkbox.
Also add a label element to the right of the new checkbox with text Energetic. Make sure to associate the label element with the new checkbox.
You need to add a new checkbox.
assert.lengthOf(document.querySelectorAll('input[type="checkbox"]'),3);
Your new checkbox should have an id attribute with the value energetic and a name attribute with the value personality. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')];
assert(
checkboxes.some(
(checkbox) =>
checkbox.id === 'energetic' &&
checkbox.getAttribute('name') === 'personality'
)
);
Your new checkbox should be after the second one. You have them in the wrong order.
const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')].map(
(checkbox) => checkbox.id
);
assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic'));
On the right side of your new checkbox, there should be label element with the text Energetic.
const nextElementSibling = document.querySelectorAll('input[type="checkbox"]')?.[2]?.nextElementSibling;
assert.isOk(
nextElementSibling?.nodeName === 'LABEL' &&
nextElementSibling?.innerText?.trim().match(/^Energetic$/i)
);
The new label should have a for attribute with the same value as the id attribute of the new checkbox. You have either omitted the value or have a typo.
assert.strictEqual(
document.querySelectorAll('input[type="checkbox"]')?.[2]?.nextElementSibling?.getAttribute('for'),
'energetic'
);
<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">
<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>
--fcc-editable-region--
<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
--fcc-editable-region--
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>