Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 1

JavaScript
1

Tell us what’s happening:

The question asks for a math.floor and a math.random, if im not wrong, this is how it was used previously, or can someone help me see whats going on? and if you know where math.random and math.floor was used together last or introduced, it would be nice to know…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock, Paper, Scissors game</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Let's play Rock, Paper, Scissors!</h1>
    <main>
      <details class="rules-container">
        <summary>Rules to the game</summary>

        <p>You will be playing against the computer.</p>
        <p>You can choose between Rock, Paper, and Scissors.</p>
        <p>The first one to three points wins.</p>

        <p>Here are the rules to getting a point in the game:</p>
        <ul>
          <li>Rock beats Scissors</li>
          <li>Scissors beats Paper</li>
          <li>Paper beats Rock</li>
        </ul>
        <p>
          If the player and computer choose the same option (Ex. Paper and
          Paper), then no one gets the point.
        </p>
      </details>

      <div class="score-container">
        <strong
          >Player Score: <span class="score" id="player-score">0</span></strong
        >
        <strong
          >Computer Score:
          <span class="score" id="computer-score">0</span></strong
        >
      </div>

      <section class="options-container">
        <h2>Choose an option:</h2>
        <div class="btn-container">
          <button id="rock-btn" class="btn">Rock</button>
          <button id="paper-btn" class="btn">Paper</button>
          <button id="scissors-btn" class="btn">Scissors</button>
        </div>
      </section>

      <div class="results-container">
        <p id="results-msg"></p>
        <p id="winner-msg"></p>
        <button class="btn" id="reset-game-btn">Play again?</button>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>


/* file: styles.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --very-dark-blue: #0a0a23;
  --white: #ffffff;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

body {
  background-color: var(--very-dark-blue);
  text-align: center;
  color: var(--white);
}

h1 {
  margin: 15px 0 20px;
}

.btn {
  cursor: pointer;
  width: 100px;
  margin: 10px;
  color: var(--very-dark-blue);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

.rules-container {
  padding: 10px 0;
  margin: auto;
  border-radius: 15px;
  border: 5px solid var(--yellow);
  background-color: var(--white);
  color: var(--very-dark-blue);
}

.rules-container ul {
  list-style-type: none;
}

.rules-container p {
  margin: 10px 0;
}

@media (min-width: 760px) {
  .rules-container {
    width: 60%;
  }
}

.score-container {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
  font-size: 1.2rem;
}

.score {
  font-weight: 500;
}

.results-container {
  font-size: 1.3rem;
  margin: 15px 0;
}

#winner-msg {
  margin-top: 25px;
}

#reset-game-btn {
  display: none;
  margin: 20px auto;
}


/* file: script.js */

// User Editable Region

function getRandomComputerResult() {
  const options = Math.floor(Math.random(["Rock", "Paper", "Scissors"]));

}
console.log(getRandomComputerResult());

// 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/131.0.0.0 Safari/537.36

Challenge Information:

Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 1

2

What your function returns? Is it one of the options - "Rock" , "Paper" , and "Scissors"?

3

It returns an error back, would you possibly know why

4

what error is that you are getting?

5

Your getRandomComputerResult function should return a string.

6

that is not what your function is returning, to check you need to call the function and log it.

you should review how Math.random works

7

The console returns “undefined”

8

Hi there!

You have modified your array assignment. Reset the challenge step and add a return statement, that should return the options array indexing it’s it’s length in it. use Math.floor() Math.random() on the array length, so that function return a random option, like paper, scissors, or rock in the console.

9

How do you use Math.floor() Math.random() on the array length?

10

Would this be what you’re talking about?:

function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
  return Math.floor(Math.random(options.length));

}
console.log(getRandomComputerResult());
11

To return a random index, you generate a random number between zero and the array length. So, you multiply the random number by the array length. i.e. …random() * array.length

12

But how about the math.floor and math.random

13

This is how it should be:

const index = Math.floor( Math.random() * options.length)

14

Thats an amazing answer, and some of the best help ever. But the tutor prompt still says " Your getRandomComputerResult function should return a string"…

Here is the code:

function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
  return Math.floor(Math.random()*options.length);
}
console.log(getRandomComputerResult());
15

the string you need to return is one of those in the array. You have a random index, use it to get one of the things in the array

17

That is almost correct. You need to use options.length as an index of the options array.
Example indexing:

array[Math.floor(Math.random() * array.length)];
1 Like
18

Thanks, I should have stated @mikiny helped me solve it earlier

2 Likes
19

Oops! Deleted the post by mistake !