Files
2022-10-07 17:48:40 +02:00

5.0 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
62a23c1d505bfa13747c8a9b Крок 4 0 step-4

--description--

Загорніть числа 0, 100 та 50 в елементи span та загорніть ці нові елементи span в елементи strong. Потім надайте новим елементам span відповідні значення id: xpText, healthText та goldText.

--hints--

Ви повинні додати елемент strong до першого елемента .stat.

const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);

Ваш перший новий елемент strong повинен мати елемент span.

const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);

Ваш перший вкладений елемент span повинен мати id зі значенням xpText.

const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');

Ваш перший елемент span повинен бути обгорнутий навколо тексту 0.

const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '0');

Текстом вашого першого елемента .stat досі повинен бути XP: 0.

const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText, 'XP: 0');

Ви повинні додати елемент strong до другого елемента .stat.

const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);

Ваш другий новий елемент strong повинен мати елемент span.

const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);

Ваш другий вкладений елемент span повинен мати id зі значенням healthText.

const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');

Ваш другий елемент span повинен бути обгорнутий навколо тексту 100.

const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '100');

Текстом вашого другого елемента .stat досі повинен бути Health: 100.

const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText, 'Health: 100');

Ви повинні додати елемент strong до третього елемента .stat.

const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);

Ваш третій новий елемент strong повинен мати елемент span.

const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);

Ваш третій вкладений елемент span повинен мати id зі значенням goldText.

const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');

Ваш третій елемент span повинен бути обгорнутий навколо тексту 50.

const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '50');

Текстом вашого третього елемента .stat досі повинен бути 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>