4.0 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5ef9b03c81a63668521804e3 | Step 58 | 0 | step-58 |
--description--
Aggiungi un'altra casella di spunta dopo quella che hai appena aggiunto. Il valore dell'attributo id dovrebbe essere lazy e il valore dell'attributo name dovrebbe essere lo stesso dell'ultima casella di spunta.
Aggiungi anche un elemento label alla destra della nuova casella di spunta con il testo Lazy. Assicurati di associare l'elemento label con la nuova casella di spunta usando l'attributo for.
--hints--
Devi aggiungere una nuova casella di spunta.
assert($('input[type="checkbox"]').length === 2);
La nuova casella di spunta dovrebbe avere un attributo id con il valore lazy 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 attributi.
const checkboxes = [...$('input[type="checkbox"]')];
assert(
checkboxes.some(
(checkbox) =>
checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality'
)
);
La nuova casella di spunta dovrebbe essere dopo la prima. Sono nell'ordine sbagliato.
const checkboxes = [...$('input[type="checkbox"]')].map(
(checkbox) => checkbox.id
);
assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy'));
A destra della nuova casella di spunta, dovrebbe esserci l'elemento label con il testo Lazy.
const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling;
assert(
nextElementSibling.nodeName === 'LABEL' &&
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/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"]')[1].nextElementSibling.getAttribute('for') ===
'lazy'
);
--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>
--fcc-editable-region--
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>