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

Tell us what’s happening:

I’ve looked allover the net and over other function syntax I’ve used I just need to know if im on the right path and to get pointed in the right direction

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 */
function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
  const randomIndex = Math.floor(Math.random() * options.length);
  return options[randomIndex];
}


// User Editable Region

function hasPlayerWonTheRound(player, computer) {
  
  if (hasPlayerWonTheRound.player){
    
  } else if (player === computer) 

}

console.log(hasPlayerWonTheRound("Rock", "Scissors")); 
console.log(hasPlayerWonTheRound("Scissors", "Rock")); 

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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 2

As per the instructions, you should be using conditional statements to check the following, inside the function:

Here are the criteria for the player to win a round:

  • If the player chooses "Rock" and the computer chooses "Scissors"
  • If the player chooses "Scissors" and the computer chooses "Paper"
  • If the player chooses "Paper" and the computer chooses "Rock"

If any of those conditions are met then you will return true. If not, return false.

I understand that I’m just not sure where I start or structure the code

Have you completed the previous projects in this certification? Conditional statements are covered in detail from the first project (Learn Introductory Javascript by Building a Pyramid Generator) onwards.

Essentially, you can use if/else statements to compare each of the possible sets of values for player and computer, as above, and then return true or false accordingly. Nothing more complicated than that.

here is my if/else statement and it still did not pass…

if (player === “Rock” && computer === “Scissors”){
return true
} else if (player === “Rock” && computer === “Rock”){
return false
} else if (player === “Scissors” && computer === “Rock”){
return false
} else if (player === “Scissors” && computer === “Paper”){
return true
} else if (player === “Scissors” && computer === “Scissors”){
return false
} else if (player === “Paper” && computer === “Scissors”){
return false
} else if (player === “Paper” && computer === “Rock”){
return true
} else if (player === “Paper” && computer === “Paper”){
return false
} else if (player === “Rock” && computer === “Paper”){
return false
};

… what am I doing wrong?

Please use the Ask for Help button instead of spamming multiple user’s topics. Thanks