79 lines
1.6 KiB
Markdown
79 lines
1.6 KiB
Markdown
---
|
|
id: 62a115879a6d51422652cbfc
|
|
title: Step 2
|
|
challengeType: 0
|
|
dashedName: step-2
|
|
---
|
|
|
|
# --description--
|
|
|
|
Create four `div` elements within your `#game` element. Give them the following respective `id` values, in order: `stats`, `controls`, `monsterStats`, and `text`.
|
|
|
|
# --hints--
|
|
|
|
You should create four new `div` elements.
|
|
|
|
```js
|
|
assert.equal(document.querySelectorAll('div')?.length, 5);
|
|
```
|
|
|
|
You should give one of the new `div` elements an `id` of `stats`.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('div#stats'));
|
|
```
|
|
|
|
You should give one of the new `div` elements an `id` of `controls`.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('div#controls'));
|
|
```
|
|
|
|
You should give one of the new `div` elements an `id` of `monsterStats`.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('div#monsterStats'));
|
|
```
|
|
|
|
You should give one of the new `div` elements an `id` of `text`.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('div#text'));
|
|
```
|
|
|
|
You should place the new `div` elements in the correct order.
|
|
|
|
```js
|
|
function __t(a, b) {
|
|
return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
|
|
}
|
|
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
|
|
```
|
|
|
|
You should place the new `div` elements within the `#game` element.
|
|
|
|
```js
|
|
assert.equal(document.querySelector('#game')?.children?.length, 4);
|
|
```
|
|
|
|
# --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>
|
|
--fcc-editable-region--
|
|
<body>
|
|
<div id="game">
|
|
</div>
|
|
</body>
|
|
--fcc-editable-region--
|
|
</html>
|
|
```
|