4.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5efc575c8d6a74d05e68af77 | Step 59 | 0 | step-59 |
--description--
Aggiungi un'ultima casella di spunta dopo quella precedente con un attributo id con il valore energetic. L'attributo name dovrebbe essere lo stesso della casella di spunta precedente.
Aggiungi anche un elemento label a destra della nuova casella di spunta con il testo Energetic. Assicurati di associare l'elemento label alla nuova casella di spunta.
--hints--
Devi aggiungere una nuova casella di spunta.
assert($('input[type="checkbox"]').length === 3);
La nuova casella di spunta dovrebbe avere un attributo id con il valore energetic e un attributo name con il valore personality. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi.
const checkboxes = [...$('input[type="checkbox"]')];
assert(
checkboxes.some(
(checkbox) =>
checkbox.id === 'energetic' &&
checkbox.getAttribute('name') === 'personality'
)
);
La nuova casella di spunta dovrebbe essere dopo la seconda. Sono nell'ordine sbagliato.
const checkboxes = [...$('input[type="checkbox"]')].map(
(checkbox) => checkbox.id
);
assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic'));
A destra della nuova casella di spunta, ci dovrebbe essere l'elemento label con il testo Energetic.
const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling;
assert(
nextElementSibling.nodeName === 'LABEL' &&
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i)
);
Il nuovo label dovrebbe avere un attributo for con lo stesso valore dell'attributo id della nuova casella di spunta. Hai omesso il valore o hai un refuso.
assert(
$('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') ===
'energetic'
);
--seed--
--seed-contents--
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<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>