curriculum/challenges/english/blocks/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md
In your role playing game, users will be able to track their stats, buy weapons, and fight monsters. Before you can continue with the interactive JavaScript portion of the game, you need to first create the HTML elements that will display the game information.
Create four div elements within your #game element. Give them the following respective id values, in order: stats, controls, monsterStats, and text.
You should create four new div elements.
assert.equal(document.querySelectorAll('div')?.length, 5);
You should give one of the new div elements an id of stats.
assert.exists(document.querySelector('div#stats'));
You should give one of the new div elements an id of controls.
assert.exists(document.querySelector('div#controls'));
You should give one of the new div elements an id of monsterStats.
assert.exists(document.querySelector('div#monsterStats'));
You should give one of the new div elements an id of text.
assert.exists(document.querySelector('div#text'));
You should place the new div elements in the correct order.
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.
assert.equal(document.querySelector('#game')?.children?.length, 4);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>RPG - Dragon Repeller</title>
<script src="./script.js"></script>
</head>
--fcc-editable-region--
<body>
<div id="game">
</div>
</body>
--fcc-editable-region--
</html>
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];