4.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a23c1d505bfa13747c8a9b | Step 4 | 0 | step-4 |
--description--
Racchiudi i numeri 0, 100 e 50 in elementi span e racchiudi i nuovi elementi span in elementi strong. Poi assegna ai nuovi elementi span degli id con il valore xpText, healthText e goldText, rispettivamente.
--hints--
Dovresti aggiungere un elemento strong nel primo elemento .stat.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Il primo nuovo elemento strong dovrebbe avere un elemento span.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
Il primo elemento span annidato dovrebbe avere un id con il valore xpText.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');
Il primo elemento span dovrebbe circondare il testo 0.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '0');
Il testo del primo elemento .stat dovrebbe essere ancora XP: 0.
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText, 'XP: 0');
Dovresti aggiungere un elemento strong nel secondo elemento .stat.
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Il secondo nuovo elemento strong dovrebbe avere un elemento span.
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
Il secondo elemento span annidato dovrebbe avere un id con il valore healthText.
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');
Il secondo elemento span dovrebbe circondare il testo 100.
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '100');
Il testo del secondo elemento .stat dovrebbe essere ancora Health: 100.
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText, 'Health: 100');
Dovresti aggiungere un elemento strong nel terzo elemento .stat.
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Il terzo nuovo elemento strong dovrebbe avere un elemento span.
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
Il terzo elemento span annidato dovrebbe avere un id con il valore goldText.
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');
Il terzo elemento span dovrebbe circondare il testo 50.
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '50');
Il testo del terzo elemento .stat dovrebbe essere ancora Gold: 50.
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.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>
</head>
<body>
<div id="game">
<div id="stats">
--fcc-editable-region--
<span class="stat">XP: 0</span>
<span class="stat">Health: 100</span>
<span class="stat">Gold: 50</span>
--fcc-editable-region--
</div>
<div id="controls"></div>
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
</html>