mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 19:43:28 -05:00
82 lines
1.7 KiB
Markdown
82 lines
1.7 KiB
Markdown
---
|
|
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
|
|
<!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>
|
|
```
|
|
|
|
```js
|
|
let xp = 0;
|
|
let health = 100;
|
|
let gold = 50;
|
|
let currentWeaponIndex = 0;
|
|
let fighting;
|
|
let monsterHealth;
|
|
let inventory = ["stick"];
|
|
```
|