Learn Basic JavaScript by Building a Role Playing Game - Step 26

JavaScript
1

Tell us what’s happening:

This seems to be how google tells me to do it, but it’s not working.

#text{background-color:#0a0a23}

#text{color:#ffffff}

#text{padding:10px}

<!-- file: index.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>
      <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>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #0a0a23;
}


/* User Editable Region */

#text{background-color:#0a0a23}
#text{color:#ffffff}
#text{padding:10px}

/* User Editable Region */


/* file: script.js */
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn Basic JavaScript by Building a Role Playing Game - Step 26

2

Hi there and welcome to our community!

You don’t need to create a separate selector for each CSS rule.
You can create a single selector and then put all rules which apply to that selector inside a single set of curly brackets.

EXAMPLE:

p { 
  color: red;
  font-size: 24px;
  padding: 5px;
}
1 Like
3

i tried that but it doesnt seem to work for some reason i put a div there and it doesnt work

5

Hello! I think there was a problem in the debugger of this specific step.
I am 100% sure that I have got it correct since the preview, display it well with this code.
#text {
background-color: #0a0a23;
color: #ffffff;
padding: 10px;
}

But the problem it doesn’t proceed for the next step and keeps telling that the color is not #ffffff;

chrome_KuuUFM1QtR
chrome_KuuUFM1QtR816×848 38.9 KB

6

do you have an extension that changes the color of the page?

also

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
7

Thank you. I think it was the Night Eye extension that I have used in the Google Chrome Browser. After turning it off, the code has been successful to proceed in the next step.

Thank you for your help :slight_smile: