mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 11:36:11 -05:00
1.7 KiB
1.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a1166ed9a56d439c0770e7 | Step 12 | 0 | 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.
const spans = document.querySelectorAll('#stats > span');
assert.equal(spans?.length, 3);
You should give the new three span elements a class of stat.
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 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');
--seed--
--seed-contents--
<!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"];