--- id: 62a23d1c5f1c93161f3582ae title: Step 6 challengeType: 0 dashedName: step-6 --- # --description-- 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. # --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'); ``` Your first `span` element should have the text `Monster Name:`. Make sure the spacing is correct. ```js const spans = document.querySelectorAll(`#monsterStats > span`); assert.equal(spans[0].innerText, 'Monster Name: '); ``` Your second `span` element should have the text `Health:`. Make sure the spacing is correct. ```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: /); assert.match(spans[1].innerHTML, /Health: /); ``` # --seed-- ## --seed-contents-- ```html RPG - Dragon Repeller
XP: 0 Health: 100 Gold: 50
--fcc-editable-region--
--fcc-editable-region--
```