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

Tell us what’s happening:

Going through my notes, i’ve found the Math.floor/Math.random code. I believe the way that i have done it, will generate a number between 1 & 3 - which is what i need and is what Tip #1 is talking about.

But i’m not sure how to then apply it to the Tip #2. Or if i’m even right about Tip #1.

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 = ["Rock", "Paper", "Scissors"];
  Math.floor(Math.random() * 3) + 1;
}
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/124.0.0.0 Safari/537.36

Challenge Information:

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

You should be using a return statement to return a randomly generated option from the options array, noting that arrays have zero-based indexing (i.e. you’ll need to generate an integer between 0 and 2, not 1 and 3).

Hello @Troy19792024,

You are definitely on the right track.

Math.random() will generate a number from 0 to 1. If you need a random number in the range 0 to 9, inclusive you would simply multiply Math.random() by 10 (e.g. if the number generate by Math.random() is 0, 0 * 10 = 0; if 0.793 is generated 0.793 * 10 = 7.93).

Since you need an integer to index an array, Math.floor() is required to convert the product to an integer (e.g. 7.93 becomes 7).

Your code above will be able to generate a 3 which will cause an out of bounds error and crash the app. Equally, it won’t be able to generate a zero since 0 + 1 = 1, meaning that the first element of the array will be inaccessible.

Does this help?

Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

thanks for information @ios-man . I was able to pass the step and will definitely be referring back to your explanation in the future.

1 Like