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

JavaScript
1

Tell us what’s happening:

Hello! Still completely new to JS, so this might be a dumb question…
i cant figure out how to make the code give med a string in return.

the current feedback is:

  1. Your getRandomComputerResult function should return a string.
  2. Your getRandomComputerResult function should return one of the options in the options array.
  3. Your getRandomComputerResult function should return a random option each time.

can someone point me in the right direction? :slight_smile:

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: script.js */

// User Editable Region

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

// User Editable Region


/* 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;
}

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

Math.floor(Math.random()) alone produce nothing.
Edit: also you didn’t need to add .push() random index to the array. You already have indexed three items in the options array.

3

You are very close here except assign another var toMath.floor(Math.random)I think that you should of used const as well. After that return two variables and an array.

Note: don’t place the Math.floor(Math.random() inside a push method your code is throwing an error inside the console.

More Information: JavaScript Random.

4

  1. Math.floor() will always floor Math.random() to 0. You need it to produce a range of number to be used as an index for the array. The MDN page on Math.random() has examples.

  2. You are not asked to make changes to the options array. Only index into it using a random index to return one of the array elements.

  3. push returns the new length of the array after the push. So its return value is not useful here (MDN).

  4. You are missing a closing parentheses for options.push(Math.floor(Math.random()) but that doesn’t really matter because it isn’t the code you should be writing anyway.

  5. output is an undeclared variable. All variables must be declared in the code in the fCC editor, otherwise it will throw a reference error.