2022-10-15 08:52:49 +00:00
---
id: 62a23d1c5f1c93161f3582ae
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
2022-10-18 07:29:49 +00:00
Similar to your `#stats` element, your `#monsterStats` element needs two `span` elements. Give them the class `stat` and give the first element the text `Monster Name:` and the second the text `Health:` . After the text in each, add a `strong` element with an empty nested `span` element.
2022-10-15 08:52:49 +00:00
# --hints--
Your `monsterStats` element should have two `span` elements.
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
assert.equal(spans.length, 2);
```
Your new `span` elements should both have a `class` value of `stat` .
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
assert.equal(spans[0].className, 'stat');
assert.equal(spans[1].className, 'stat');
```
2022-10-18 07:29:49 +00:00
Your first `span` element should have the text `Monster Name:` . Make sure the spacing is correct.
2022-10-15 08:52:49 +00:00
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
assert.equal(spans[0].innerText, 'Monster Name: ');
```
2022-10-18 07:29:49 +00:00
Your second `span` element should have the text `Health:` . Make sure the spacing is correct.
2022-10-15 08:52:49 +00:00
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
assert.equal(spans[1].textContent, 'Health: ');
```
Your first `span` element should have a `strong` element with an empty nested `span` element.
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
const strong = spans[0]?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(strong);
assert.exists(span);
```
Your second `span` element should have a `strong` element with an empty nested `span` element.
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
const strong = spans[1]?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(strong);
assert.exists(span);
```
Your `strong` and `span` elements should come after the text.
```js
const spans = document.querySelectorAll(`#monsterStats > span`);
assert.match(spans[0].innerHTML, /Monster Name: < strong > /);
assert.match(spans[1].innerHTML, /Health: < strong > /);
```
# --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 >
< body >
< div id = "game" >
< div id = "stats" >
< span class = "stat" > XP: < strong > < span id = "xpText" > 0< / span > < / strong > < / span >
< span class = "stat" > Health: < strong > < span id = "healthText" > 100< / span > < / strong > < / span >
< span class = "stat" > Gold: < strong > < span id = "goldText" > 50< / span > < / strong > < / span >
< / div >
< div id = "controls" >
< button id = "button1" > Go to store< / button >
< button id = "button2" > Go to cave< / button >
< button id = "button3" > Fight dragon< / button >
< / div >
--fcc-editable-region--
< div id = "monsterStats" >
< / div >
--fcc-editable-region--
< div id = "text" > < / div >
< / div >
< / body >
< / html >
```
