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

Tell us what’s happening:

Hello I’m stuck in step 15

Your code so far :

body {
background-color: #0a0a23;
}

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

#game {
max-width: 500px;
max-height: 400px;
background-color: #ffffff;
color: #ffffff;
margin: 30px auto 0px;
padding: 10px;
}

#controls,
#stats {
border: 1px solid #0a0a23;
padding: 5px;
color: #0a0a23;
}

#monsterStats {
display: none;
border: 1px solid #0a0a23;
padding: 5px;
color: #ffffff;
background-color: #c70d0d;
}

.stat {
padding-right: 10px;
}
i need this → Step 15

Finally, you will need to add some styles for your buttons. Start by setting the cursor property to pointer. Then set the text color to #0a0a23 and the background-color to #feac32.

Then set the background-image property to linear-gradient(#fecc4c, #ffac33). Lastly, set the border to 3px solid #feac32.

Please can someone help

<!-- 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>
  </body>
</html>
/* file: styles.css */
body {
  background-color: #0a0a23;
}

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

#game {
  max-width: 500px;
  max-height: 400px;
  background-color: #ffffff;
  color: #ffffff;
  margin: 30px auto 0px;
  padding: 10px;
}

#controls,
#stats {
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #0a0a23;
}

#monsterStats {
  display: none;
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #ffffff;
  background-color: #c70d0d;
}

.stat {
  padding-right: 10px;
}


/* User Editable Region */

#controls button {
    cursor: pointer;
    color: #0a0a23;
    background-color: #feac32;
    background-image: linear-gradient(#fecc4c, #ffac33);
    border: 3px solid #feac32;
    margin: 5px; /* Add margin for spacing between buttons */
}


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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 15

Welcome to the community!

This step asks us to create a button selector in our css file.

We need to follow the instructions to add the property and value as directed.

You could use the above quote as an example of how to create the button element selector, as well as how to add the property and value for each as directed.

The body would be where the button would be and everything else goes within the curly brackets.

I hope this helps you.

Wishing you good progress.

Let’s try again because i’m stuck,
the step 15 said :
----> Step 15

Finally, you will need to add some styles for your buttons. Start by setting the cursor property to pointer. Then set the text color to #0a0a23 and the background-color to #feac32.

Then set the background-image property to linear-gradient(#fecc4c, #ffac33). Lastly, set the border to 3px solid #feac32.

Then my programme is like that :
body {
background-color: #0a0a23;
}

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

#game {
max-width: 500px;
max-height: 400px;
background-color: #ffffff;
color: #ffffff;
margin: 30px auto 0px;
padding: 10px;
}

#controls,
#stats {
border: 1px solid #0a0a23;
padding: 5px;
color: #0a0a23;
}

#monsterStats {
display: none;
border: 1px solid #0a0a23;
padding: 5px;
color: #ffffff;
background-color: #c70d0d;
}

.stat {
padding-right: 10px;
}

i need to complete it but i do not know how, can u please help !

so now you have to create a buttonselector and add all those style into it like you are doing with body

but how to add the button i’m stuck i tried like this :
#controls button {
cursor: pointer;
color: #0a0a23;
background-color: #feac32;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
padding: 10px 20px; /* Adjust padding as needed /
margin: 5px; /
Add margin for spacing between buttons */
}

#controls button:hover {
background-color: #ffcc66;
border-color: #ffcc66;
}

But dosn’t work

button{
than put styles here
}```

Ok thank you it work :sweat_smile:

1 Like

np mate.
Happy coding

thanks bro.
for you too