mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-26 22:01:30 -04:00
3.7 KiB
3.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a240c67f3dbb1a1e6d95ee | Крок 10 | 0 | step-10 |
--description--
Надайте #game максимальної ширини зі значенням 500px та максимальної висоти зі значенням 400px. Встановіть background-color на lightgray та color на white. Використайте поля, щоб відцентрувати його, встановивши верхнє та нижнє поле на 0, а ліве та праве на auto. Також надайте йому відступ зі значенням 10px на всіх сторонах.
--hints--
Ви повинні мати селектор #game.
const game = new __helpers.CSSHelp(document).getStyle('#game');
assert.exists(game);
Ваш селектор #game повинен мати max-width зі значенням 500px.
const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
assert.equal(maxWidth, '500px');
Ваш селектор #game повинен мати max-height зі значенням 400px.
const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
assert.equal(maxHeight, '400px');
Ваш селектор #game повинен мати background-color зі значенням lightgray.
const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color');
assert.equal(background, 'lightgray');
Ваш селектор #game повинен мати color зі значенням white.
const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color');
assert.equal(color, 'white');
Ваш селектор #game повинен мати margin зі значенням 0 auto.
const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
assert.equal(margin, '0px auto');
Ваш селектор #game повинен мати відступ зі значенням 10px зі всіх сторін.
const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding');
assert.equal(padding, '10px');
--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;
}
--fcc-editable-region--
--fcc-editable-region--