freeCodeCamp/curriculum/challenges/ukrainian/15-javascript-algorithms-an.../learn-basic-javascript-by-b.../62a24190868ca51c0b6e83c7.md

3.5 KiB
Raw Blame History

id title challengeType dashedName
62a24190868ca51c0b6e83c7 Крок 13 0 step-13

--description--

Поки приховайте свій елемент #monsterStats. Не змінюйте жодного іншого стилю.

--hints--

Ви повинні мати селектор #monsterStats.

const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
assert.exists(monsterStats);

Ваш селектор #monsterStats повинен мати властивість display зі значенням none.

const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display');
assert.equal(display, 'none');

Ваш селектор #monsterStats повинен мати border зі значенням 1px solid black.

const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
assert.equal(border, '1px solid black');

Ваш селектор #monsterStats повинен мати відступ зі значенням 5px.

const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
assert.equal(padding, '5px');

Ваш селектор #monsterStats повинен мати color зі значенням white.

const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
assert.equal(color, 'white');

Ваш селектор #monsterStats повинен мати background-color зі значенням red.

const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
assert.equal(background, 'red');

--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">
            <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>
        <div id="monsterStats">
            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
        </div>
        <div id="text">
            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
        </div>
    </div>
</body>
</html>
body {
    background-color: darkblue;
}

#text {
    background-color: black;
    color: white;
    padding: 10px;
}

#game {
    max-width: 500px;
    max-height: 400px;
    background-color: lightgray;
    color: white;
    margin: 0 auto;
    padding: 10px;
}

#controls, #stats {
    border: 1px solid black;
    padding: 5px;
    color: black;
}

--fcc-editable-region--
#monsterStats {

    border: 1px solid black;
    padding: 5px;
    color: white;
    background-color: red;
}
--fcc-editable-region--