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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.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">

<!-- User Editable Region -->

        <strong class = "stat"></strong>
        <span id = "xpText"></span>
        <span id = "healthText"></span>
        <span id = "goldText"></span>

<!-- User Editable Region -->

      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
</html>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Hello and Welcome!

Please, for future posts, include your questions, and error messages along with the code.

Below is the code we begin this step with as provided in the lesson.

<span class="stat">XP: 0</span>
        <span class="stat">Health: 100</span>
        <span class="stat">Gold: 50</span>

The step asks us to place a span element around the numbers only while they remain within their respective code

Our added opening span should placed after the space and before the number within the code. Like this example:

<span>text: <another new element tag><new element tag attribute="value">number</new closing element tag><another new closing element tag></span>

This needs to be completed for each set of code as in the instructions.

Happy coding!

1 Like
4

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.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">

<!-- User Editable Region -->

  <strong class = "stat">xp: 0<span>0</span></strong><span id = "xpText"></span>
  <strong class = "stat">health: 100<span>100</span></strong><span id = "healthText"><span>
  <strong class = "stat"> gold: 50<span>50</span></strong><span id = "goldText"></span>

<!-- User Editable Region -->

      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
</html>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

5

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

6

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.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">

<!-- User Editable Region -->

  <span id = "xpText"></span><strong class = "stat"><span>0</strong></span><span class = "stat">xp: 0</span>
 <span class ="stat"> <strong class = "stat"><span>100</span></strong></span><span id = "healthText">heath: 100</span><span class = "stat"><strong class = "stat"><span>50</span></strong></sapn><span id = "goldText">gold:50</span>

<!-- User Editable Region -->

      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
</html>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

7

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

8

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.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">

<!-- User Editable Region -->

<span class="stat">xp: 0</span>
<span class="stat">health: 100</span>
<span class="stat">gold: 50
<strong class="stat">xp:0<span>0</span></strong><span id="xpText"></span>
<strong class="stat">health:100<span>100</span></strong><span id="healthText"></span><strong class="stat">gold:50<span>50</span>
</strong><span id="goldText"></span>

<!-- User Editable Region -->

      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
</html>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

9

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

10

I have don’t remember this question

11

Hello!

Are you stuck on this question, still, or have you moved on to another step?

12

Hello!
It appears many people are having difficulty with this step. I broke it down with examples in hopes that it will help some of them understand it a bit more clearly.

I hope it is okay the way I have completed the breakdown. If not, please let me know?
JavaScript Algorithms and Data Structures(Beta)
Building a Role Playing Game Step 17
It is important to note that all code needs to be completed within the provided start code.

Quoted from Building a Role Playing Game Step 17 is the beginning code:

   <span class="stat">XP: 0</span>
   <span class="stat">Health: 100</span>
   <span class="stat">Gold: 50</span>

Next up:
⦁ Wrap the numbers (only the numbers) within span elements.
Example Only:


<span class="value">Text: 9</span>

Now wrapping only the number in a new span:

<span class="value">Text: <new span>9</span></span>

Next:
⦁ Wrap the new span elements (only the new span elements and content) within strong elements.
Example Only:

<span class="value">Text: <strong><new span>9</span></strong></span>

Next:

⦁ We are asked to give the new span elements (only the new span elements) id values of xpText, healthText, and goldText to match each original text.
Example Only:

<span class="value">Text: <strong id="value"><new span>9</span></strong></span>

Please note that the values in the examples should be replaced according to what the instructions are asking us to insert. As well, the numbers should be the numbers in the original code, not my example number. Where it shows the word ‘Text’ it should not be changed to text. It should remain whatever the text was in the original provided code.

I hope this will help you understand an move on to the next step.

2 Likes
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.