100 lines
2.9 KiB
Markdown
100 lines
2.9 KiB
Markdown
---
|
|
id: 62a23cb9bc467a147516b500
|
|
title: Крок 5
|
|
challengeType: 0
|
|
dashedName: step-5
|
|
---
|
|
|
|
# --description--
|
|
|
|
Всередині свого елемента `#controls` створіть три елементи `button`. Перший повинен мати `id` зі значенням `button1` та текст `Go to store`. Другий повинен мати `id` зі значенням `button2` та текст `Go to cave`. Третій повинен мати `id` зі значенням `button3` та текст `Fight dragon`.
|
|
|
|
# --hints--
|
|
|
|
Ви повинні додати три елементи `button` до свого елемента `#controls`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
assert.exists(buttons);
|
|
assert.equal(buttons.length, 3);
|
|
```
|
|
|
|
Ваша перша кнопка повинна мати `id` зі значенням `button1`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button1 = buttons[0];
|
|
assert.equal(button1.id, 'button1');
|
|
```
|
|
|
|
Ваша перша кнопка повинна мати текст `Go to store`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button1 = buttons[0];
|
|
assert.equal(button1.innerText, 'Go to store');
|
|
```
|
|
|
|
Ваша друга кнопка повинна мати `id` зі значенням `button2`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button2 = buttons[1];
|
|
assert.equal(button2.id, 'button2');
|
|
```
|
|
|
|
Ваша друга кнопка повинна мати текст `Go to cave`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button2 = buttons[1];
|
|
assert.equal(button2.innerText, 'Go to cave');
|
|
```
|
|
|
|
Ваша третя кнопка повинна мати `id` зі значенням `button3`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button3 = buttons[2];
|
|
assert.equal(button3.id, 'button3');
|
|
```
|
|
|
|
Ваша третя кнопка повинна мати текст `Fight dragon`.
|
|
|
|
```js
|
|
const buttons = document.querySelectorAll('#controls > button');
|
|
const button3 = buttons[2];
|
|
assert.equal(button3.innerText, 'Fight dragon');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<!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>
|
|
--fcc-editable-region--
|
|
<div id="controls">
|
|
|
|
</div>
|
|
--fcc-editable-region--
|
|
<div id="monsterStats"></div>
|
|
<div id="text"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|