3.1 KiB

Raw Blame History

id	title	challengeType	dashedName
62a240c67f3dbb1a1e6d95ee	Step 10	0	step-10

--description--

Give your #game a maximum width of 500px and a maximum height of 400px. Set the background-color to lightgray and the color to white. Finally, use margins to center it and give it 10px of padding on all four sides.

--hints--

You should have a #game selector.

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

Your #game selector should have a max-width of 500px.

const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
assert.equal(maxWidth, '500px');

Your #game selector should have a max-height of 400px.

const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
assert.equal(maxHeight, '400px');

Your #game selector should have a background-color of lightgray.

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

Your #game selector should have a color of white.

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

Your #game selector should have a margin set to 0 auto.

const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
assert.equal(margin, '0px auto');

Your #game selector should have 10px of padding on all sides.

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--

3.1 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

3.1 KiB

Raw Blame History