2.5 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc23991f86c76b9248c6eb8 | Step 6 | 0 | step-6 |
--description--
Gli elementi HTML sono spesso annidati all'interno di altri elementi HTML. Nel passaggio precedente hai annidato l'elemento h2, il commento e l'elemento p all'interno dell'elemento main. Un elemento annidato è un figlio dell'elemento genitore.
Per facilitare la lettura dell'HTML, indenta l'elemento h2, il commento e l'elemento p esattamente di due spazi per indicare che sono contenuti nell'elemento main.
--hints--
Il codice dovrebbe avere un elemento h2 con il testo Cat Photos. Potresti averlo cancellato accidentalmente, mancano i tag di apertura e di chiusura, o il testo è cambiato.
assert(
document.querySelector('h2') &&
code.match(/<\/h2\>/) &&
document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
L'elemento h2 dovrebbe essere sotto il tag di apertura dell'elemento main e il suo tag di apertura dovrebbe iniziare dopo 6 spazi dall'inizio della riga.
assert(code.toLowerCase().match(/<main\>\n\s{6}<h2>/));
Il codice dovrebbe avere un commento. Hai rimosso il commento che era presente.
assert(code.match(/<!--.*-->/));
Il testo del commento dovrebbe essere TODO: Add link to cat photos. Non modificare il testo o lo spazio del commento.
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
Il commento dovrebbe essere sotto l'elemento h2 e iniziare dopo 6 spazi dall'inizio della riga.
assert(
code
.toLowerCase()
.match(/<\/h2>\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
Il codice dovrebbe avere un elemento p. Hai rimosso l'elemento p che era presente.
assert(document.querySelector('p'));
Il testo dell'elemento p dovrebbe essere Click here to view more cat photos. Non modificare il testo, la spaziatura o la punteggiatura dell'elemento p.
assert(
document
.querySelector('p')
.innerText.toLowerCase()
.match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/)
);
L'elemento p dovrebbe essere sotto il commento e il suo tag di apertura dovrebbe iniziare dopo 6 spazi dall'inizio della riga.
assert(code.toLowerCase().match(/-->\n\s{6}<p>/));
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
--fcc-editable-region--
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more cat photos.</p>
--fcc-editable-region--
</main>
</body>
</html>