ContextQMD
Back to Freecodecamp

Step 14

curriculum/challenges/english/blocks/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md

latest2.6 KB
Original Source

--description--

For your #controls element, create three button elements. The first should have the id set to button1, and the text Go to store. The second should have the id set to button2, and the text Go to cave. The third should have the id set to button3, and the text Fight dragon.

--hints--

You should add three button elements to your #controls element.

js
const buttons = document.querySelectorAll('#controls > button');
assert.exists(buttons);
assert.equal(buttons.length, 3);

Your first button should have the id set to button1.

js
const buttons = document.querySelectorAll('#controls > button');
const button1 = buttons[0];
assert.equal(button1.id, 'button1');

Your first button should have the text Go to store.

js
const buttons = document.querySelectorAll('#controls > button');
const button1 = buttons[0];
assert.equal(button1.innerText, 'Go to store');

Your second button should have the id set to button2.

js
const buttons = document.querySelectorAll('#controls > button');
const button2 = buttons[1];
assert.equal(button2.id, 'button2');

Your second button should have the text Go to cave.

js
const buttons = document.querySelectorAll('#controls > button');
const button2 = buttons[1];
assert.equal(button2.innerText, 'Go to cave');

Your third button should have the id set to button3.

js
const buttons = document.querySelectorAll('#controls > button');
const button3 = buttons[2];
assert.equal(button3.id, 'button3');

Your third button should have the text 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>
    <script src="./script.js"></script>
  </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>
js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];