---
id: 61fd67a656743144844941cb
title: Hatua ya 4
challengeType: 0
dashedName: step-4
---

# --description--

Visoma skrini vinatangaza vipengele vya HTML kulingana na mtiririko wa hati. Hatimaye tutataka laha ya usawa iwe na kichwa cha "Balance Sheet" na kichwa kidogo cha "AcmeWidgetCorp". Hata hivyo, agizo hili halina maana ikiwa litatangazwa na kisoma skrini.

Ipe `span` yako iliyopo sifa ya `class` iliyowekwa kuwa `flex`, na uongeze vipengele viwili vya `span` ndani yake. Ipe ya kwanza maandishi `AcmeWidgetCorp`. Ipe ya pili maandishi `Balance Sheet`. Utatumia CSS kubadilisha mpangilio wa maandishi kwenye ukurasa, lakini mpangilio wa HTML utaleta maana zaidi kwa kisomaji skrini.

# --hints--

Kipengele chako cha `span` kilichopo kinafaa kuwa na sifa ya `class` iliyowekwa kuwa `flex`.

```js
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
```

Kipengele chako cha `span` kilichopo kinafaa kuwa na vipengele viwili vipya vya `span` ndani yake.

```js
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
```

Vipengele vyako vipya vya `span` havifai kuwa na sifa ya `class`.

```js
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
```

Kipengele chako kipya cha kwanza cha `span` kinapaswa kuwa na maandishi `AcmeWidgetCorp`.

```js
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
```

Kipengele chako cha pili cha `span` kinapaswa kuwa na maandishi `Balance Sheet`.

```js
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
```

# --seed--

## --seed-contents--

```html
<!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>
```

```css

```
