4.4 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5f05a1d8e233dff4a68508d8 | Step 47 | 0 | step-47 |
--description--
Crea un altro pulsante di opzione sotto il primo. Annidalo all'interno di un elemento label con Outdoor come testo dell'elemento label. Dai al pulsante di opzione un attributo id con outdoor come valore.
--hints--
Solo l'input del pulsante di opzione Indoor originario dovrebbe avere un id impostato su indoor. Se ne hai bisogno, puoi riavviare lo step per tornare all'HTML di partenza.
assert(document.querySelectorAll('#indoor').length < 2);
Non dovresti apportare modifiche al pulsante di opzione Indoor. Se ne hai bisogno, puoi riavviare lo step per tornare all'HTML di partenza.
const indoorInput = document.querySelectorAll('#indoor');
assert(
indoorInput.length == 1 &&
indoorInput[0]?.nodeName?.toUpperCase() === 'INPUT' &&
indoorInput[0]?.type === 'radio' &&
code.match(/<label\s*>\s*<input [^>]*(id=["']?indoor["']?)[^>]*>\s*Indoor\s*<\/label>/)
);
Dovresti aggiungere esattamente un elemento input annidato all'interno di un nuovo elemento label. Assicurati che il nuovo label abbia sia il tag di apertura che di chiusura.
assert(document.querySelectorAll('label input').length === 2);
Non dovresti aggiungere alcun attributo nel tag di apertura label.
assert(code.match(/<label\s*>/g).length === 2);
Il nuovo input dovrebbe avere un attributo id con il valore outdoor.
assert(document.querySelector('label input[id="outdoor"]'));
Il nuovo elemento input dovrebbe avere un attributo type con il valore radio.
assert(document.querySelector('label input[id="outdoor"][type="radio"]'));
Non dovresti aggiungere alcun nuovo elemento oltre un input annidato in un label.
assert(document.querySelector('label input[id="outdoor"]:only-child'));
Non ci dovrebbe essere alcun testo a sinistra del nuovo input.
const outdoorBtn = document.querySelector('label input[id="outdoor"]');
assert(
outdoorBtn?.previousSibling?.nodeName !== '#text' ||
outdoorBtn?.previousSibling?.nodeValue?.replace(/\s/g, '') === ''
);
Il testo del label del nuovo pulsante di opzione deve essere esattamente Outdoor. Ciò include la maiuscola all'inizio della parola.
assert(document.querySelector('label > input[id="outdoor"]')?.nextSibling?.nodeValue?.replace(/^\s+|\s+$/g, '') === 'Outdoor');
Il nuovo pulsante di opzione e label dovrebbero essere immediatamente sotto/dopo il pulsante di opzione e label Indoor. Non ci dovrebbero essere altri tag tra di loro.
assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
--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">
--fcc-editable-region--
<label><input id="indoor" type="radio"> Indoor</label>
--fcc-editable-region--
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>