79 lines
2.2 KiB
Markdown
79 lines
2.2 KiB
Markdown
|
---
|
||
|
|
id: 61fd67a656743144844941cb
|
||
|
|
title: Step 4
|
||
|
|
challengeType: 0
|
||
|
|
dashedName: 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` impostato su `flex`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `span` esistente dovrebbe avere due nuovi elementi `span` al suo interno.
|
||
|
|
|
||
|
|
```js
|
||
|
|
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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
|
||
|
|
```
|
||
|
|
|
||
|
|
Il secondo nuovo elemento `span` dovrebbe avere il testo `Balance Sheet`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Balance Sheet</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<section>
|
||
|
|
<h1>
|
||
|
|
--fcc-editable-region--
|
||
|
|
<span>
|
||
|
|
</span>
|
||
|
|
--fcc-editable-region--
|
||
|
|
</h1>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
|
||
|
|
```
|