<h1>Rock, Paper, or Scissors?</h1>

<p>A steam-powered bot has challenged you to a game. <strong>Rock</strong> beats <strong>scissors</strong>, <strong>scissors</strong> beats <strong>paper</strong>, and <strong>paper</strong> beats <strong>rock</strong>.</p>

<div class="scoreboard">
  <h2>Scoreboard</h2>
  <table>
    <tbody>
      <tr>
        <td id="humanScore">0</td>
        <td id="computerScore">0</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>You</th>
        <th>Bot</th>
      </tr>
    </tfoot>
  </table>
</div>

<h2 id="choose">Choose Wisely</h2>

<button id="rock">Rock</button>

<button id="paper">Paper</button>

<button id="scissors">Scissors</button>
<button id="restart">Reset</button>

<div id="status"></div>

body {
  font-family: monospace;
  font-size: 20px;
  text-align: center;
  background: black;
  color: lime;
  margin: 3em;
}

strong {
  text-decoration: underline;
}

button {
  background: lime;
  color: black;
  border: none;
  padding: 10px 15px;
  font-size: 1.2em;
  font-family: monospace;
  font-weight: bold;
}
button:active {
  background: green;
}

.scoreboard {
  width: 14em;
  margin: auto;
  border: 1px solid lime;
}
.scoreboard h2 {
  border-bottom: 1px solid lime;
  margin: 0;
  padding: 10px;
}
.scoreboard table {
  margin: 10px auto;
  width: 100%;
  border-collapse: collapse;
}
.scoreboard th, .scoreboard td {
  text-align: center;
}
.scoreboard td {
  font-size: 3em;
  padding: 0 20px;
}

#status {
  margin-top: 20px;
}
var myscore=0;
var compscore=0;
var mychoice="";
var compchoice="";
var choices=["rock","paper","scissors"];
var x=0;

document.getElementById("rock").onclick = function(){
  mychoice="rock";
  x=Math.floor(Math.random()*3);
  compchoice=choices[x];
  
  if ((mychoice=="rock" && compchoice=="scissors")||(mychoice=="paper" && compchoice=="rock")||(mychoice=="scissors" && compchoice=="paper")){
    myscore++;
    document.getElementById("humanScore").innerHTML=myscore;

  }
  if ((compchoice=="scissors" && mychoice=="paper")||(compchoice=="paper" && mychoice=="rock")||(compchoice=="scissors" && mychoice=="paper")){
    compscore++;
    document.getElementById("computerScore").innerHTML=compscore;

  }
if (compscore>=10 && compscore>myscore){
  document.getElementById("choose").innerHTML = "Computer Wins!";

}
if (myscore>=10 && compscore<myscore){
  document.getElementById("choose").innerHTML="You Win!";

}
  }
  

  document.getElementById("paper").onclick = function(){
  mychoice="paper";
  x=Math.floor(Math.random()*3);  
  compchoice=choices[x];
  
  if ((mychoice=="rock" && compchoice=="scissors")||(mychoice=="paper" && compchoice=="rock")||(mychoice=="scissors" && compchoice=="paper")){
    myscore++;
    document.getElementById("humanScore").innerHTML=myscore;

  }
  else if ((compchoice=="scissors" && mychoice=="paper")||(compchoice=="paper" && mychoice=="rock")||(compchoice=="scissors" && mychoice=="paper")){
    compscore++;
    document.getElementById("computerScore").innerHTML=compscore;

  }
    if (compscore>=10 && compscore>myscore){
  document.getElementById("choose").innerHTML = "Computer Wins!";

}
if (myscore>=10 && compscore<myscore){
  document.getElementById("choose").innerHTML="You Win!";

}
}
  document.getElementById("scissors").onclick = function(){
  mychoice="scissors";
  x=Math.floor(Math.random()*3);
  
  compchoice=choices[x];
    
  if ((mychoice=="rock" && compchoice=="scissors")||(mychoice=="paper" && compchoice=="rock")||(mychoice=="scissors" && compchoice=="paper")){
    myscore++;
    document.getElementById("humanScore").innerHTML=myscore;

}
  else if ((compchoice=="scissors" && mychoice=="paper")||(compchoice=="paper" && mychoice=="rock")||(compchoice=="scissors" && mychoice=="paper")){
    compscore++;
    document.getElementById("computerScore").innerHTML=compscore;

  }
    if (compscore>=10 && compscore>myscore){
  document.getElementById("choose").innerHTML = "Computer Wins!";

}
if (myscore>=10 && compscore<myscore){
  document.getElementById("choose").innerHTML="You Win!";

}
}

document.getElementById("restart").onclick = function(){
  compscore=0;
  myscore=0;
  document.getElementById("choose").innerHTML="Choose Wisely";
  document.getElementById("computerScore").innerHTML=compscore;
  document.getElementById("humanScore").innerHTML=myscore;
}
  
  
  
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.