---
id: 62a1166ed9a56d439c0770e7
title: Step 12
challengeType: 0
dashedName: step-12
---
# --description--
Create three `span` elements within your `#stats` element. Give each of them the class `stat`. Then give the first one the text `XP: 0`, the second one the text `Health: 100`, and the third one the text `Gold: 50`.
# --hints--
You should have three `span` elements within the `#stats` element.
```js
const spans = document.querySelectorAll('#stats > span');
assert.equal(spans?.length, 3);
```
You should give the new three `span` elements a class of `stat`.
```js
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
```
Your first `.stat` element should have the provided text `XP: 0`.
```js
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
```
Your second `.stat` element should have the provided text `Health: 100`.
```js
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
```
Your third `.stat` element should have the provided text `Gold: 50`.
```js
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
```
# --seed--
## --seed-contents--
```html
RPG - Dragon Repeller
--fcc-editable-region--
--fcc-editable-region--
```
```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
```