2.2 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 61fd67a656743144844941cb | Step 4 | 0 | step-4 |
--description--
I lettori di schermo leggono gli elementi HTML in base al flusso del documento. Vogliamo che, alla fine, il bilancio abbia il titolo "Balance Sheet" e il sottotitolo "AcmeWidgetCorp". Tuttavia, questo ordine non ha senso se letto da un lettore di schermo.
Dai all'elemento span esistente l'attributo class impostato su flex e aggiungi due elementi span al suo interno. Dai al primo il testo AcmeWidgetCorp. Dare al secondo il testo Balance Sheet. Utilizzerai il CSS per invertire l'ordine del testo sulla pagina, ma l'ordine HTML avrà più senso per il lettore di schermo.
--hints--
L'elemento span esistente dovrebbe avere l'attributo class con il valore flex.
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
L'elemento span esistente dovrebbe avere due nuovi elementi span al suo interno.
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
I nuovi elementi span non dovrebbe avere un attributo class.
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
Il primo nuovo elemento span dovrebbe avere il testo AcmeWidgetCorp.
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
Il secondo nuovo elemento span dovrebbe avere il testo Balance Sheet.
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balance Sheet</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<section>
<h1>
--fcc-editable-region--
<span>
</span>
--fcc-editable-region--
</h1>
</section>
</main>
</body>
</html>