curriculum/challenges/english/blocks/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md
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.
You should have three span elements within the #stats element.
const spans = document.querySelectorAll('#stats > span');
assert.equal(spans?.length, 3);
You should give the new three span elements a class of stat.
assert.lengthOf(document.querySelectorAll('#stats > .stat'), 3);
Your first .stat element should have the provided text XP: 0.
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
Your second .stat element should have the provided text Health: 100.
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
Your third .stat element should have the provided text Gold: 50.
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>RPG - Dragon Repeller</title>
<script src="./script.js"></script>
</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>
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];