---
id: 62a1166ed9a56d439c0770e7
title: Крок 3
challengeType: 0
dashedName: step-3
---

# --description--

Створіть три елементи `span` у своєму елементі `#stats`. Надайте кожному з них клас `stat`. Потім надайте першому текст `XP: 0`, другому – `Health: 100`, а третьому – `Gold: 50`.

# --hints--

Ви повинні мати три елементи `span` всередині елемента `#stats`.

```js
const spans = document.querySelectorAll('#stats > span');
assert.equal(spans?.length, 3);
```

Ви повинні надати трьом новим елементам `span` клас зі значенням `stat`.

```js
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
```

Ваш перший елемент `.stat` повинен мати наданий текст `XP: 0`.

```js
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
```

Ваш другий елемент `.stat` повинен мати наданий текст `Health: 100`.

```js
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
```

Ваш третій елемент `.stat` повинен мати наданий текст `Gold: 50`.

```js
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
</head>
--fcc-editable-region--
<body>
    <div id="game">
        <div id="stats">

        </div>
        <div id="controls"></div>
        <div id="monsterStats"></div>
        <div id="text"></div>
    </div>
</body>
--fcc-editable-region--
</html>
```
