4.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5efc575c8d6a74d05e68af77 | Paso 58 | 0 | step-58 |
--description--
Añade un último checkbox, después del anterior, con un atributo id con el valor energetic. El atributo name debe ser igual que el del checkbox anterior.
También añade un elemento label a la derecha del nuevo elemento checkbox con el texto Energetic. Asegúrese de asociar el elemento label con el nuevo checkbox.
--hints--
Necesitas añadir un nuevo checkbox.
assert($('input[type="checkbox"]').length === 3);
Tu nuevo checkbox debe tener un atributo id con el valor energetic y un atributo name con el valor personality. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de todos los nombres de los atributos.
const checkboxes = [...$('input[type="checkbox"]')];
assert(
checkboxes.some(
(checkbox) =>
checkbox.id === 'energetic' &&
checkbox.getAttribute('name') === 'personality'
)
);
Tu nuevo checkbox debe estar después del segundo. Los tienes en el orden incorrecto.
const checkboxes = [...$('input[type="checkbox"]')].map(
(checkbox) => checkbox.id
);
assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic'));
A la derecha de tu nuevo checkbox, debe haber un elemento label con el texto Energetic.
const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling;
assert(
nextElementSibling.nodeName === 'LABEL' &&
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i)
);
El nuevo elemento label debe tener un atributo for con el mismo valor del atributo id del nuevo checkbox. Probablemente no has añadido el valor o tienes un error tipográfico.
assert(
$('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') ===
'energetic'
);
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>
--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>