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

JavaScript
1

Tell us what’s happening:

hi! I’ve actually been stuck on this lesson for quite some time now and I went back to previous lessons as well as watched videos on how to use the math.random and math.floor functions but I am very lost. can anyone help me explain this better to me?

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"];
  return  getRandomComputerResult= options[Math.floor(Math.random() * 2)];
}
console.log(getRandomComputerResult();


// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

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

2

Please review this step which explains it

1 Like
3

thanks. I’m still confused how to create an equation where I would get one of the options: rock, paper, or scissor, randomly. I don’t want to get a random number. how would I do this?

4

Hi there!
Post your code here, that you tried for random option.

5

hi. its already posted in my code in the original post.

6

You have returning the assignment of options[] using math.floor and math.random with 2. You need to calculate the index of the options array using math floor/random.

Example

array[Math.floor(Math.random() * array.length)]
7

the random number will help you pick one of the items in the array.
Think about that a bit.

8

thank you! so this was the example I based my code off and I think I may confused with the variables I’m using. I replaced array with my options array they gave me in the lesson and then replaced array.length with the length of the rock, paper, and scissors array. I’ve changed the number I’m multiplying by to 3 and still I don’t understand if there’s more code I need to write. since my current code isn’t running.

current code:
return getRandomComputerResult= options [Math.floor(Math.random() * 3)];

Do I need to define rock paper and scissor to = an index?

example:
let rock = 0;
let paper = 0;
let scissor = 0;

and then would I create an if else loop in the function as well? not sure if I’m just overcomplicating it…

9

you shouldn’t have an assignment operator in the same line as a return statement.
You can assign the random choice in a separate line above to a variable if you want or you can just return the choice. (check the instructions to see if they said to make a new variable or not)

1 Like
10

thank you! I was honestly so confused what to assign the equation to and turns out I didn’t need to assign it at all! I got the solution! thanks(:

1 Like