Coding with Rumaysa

Rock Paper Scissors!

<!DOCTYPE HTML>
<html>
 <head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width">
 </head>
 <body>
  
  <center>
   <h1>Rock Paper Scissors!</h1>
   <h3 id="prompt">Pick rock, paper or scissors</h3>
  </center>

<div>
     <h4>COMPUTER</h4>
     <div id="computer_choice" class="selected">&#9996;</div>
    </div>
   </div>
   
   <center>
    <div class="result_msg" id="win">You win! :D</div>
    <div class="result_msg" id="draw">It's a draw! :|</div>
    <div class="result_msg" id="loss">You lost! :(</div>
   </center>
  </div>

</body>
</html>

computerChoice = Math.floor(Math.random() * 3);
yourChoice = "";

prompt = document.getElementById("prompt");
rock = document.getElementById("rock");
paper = document.getElementById("paper");
scissors = document.getElementById("scissors");

results = document.getElementById("results");
your_choice = document.getElementById("your_choice");
computer_choice = document.getElementById("computer_choice");

win = document.getElementById("win");
draw = document.getElementById("draw");
loss = document.getElementById("loss");

function selectAction(action) {
 yourChoice = action;

if(computerChoice == 0) { computerChoice = "r"; }
 else if(computerChoice == 1) { computerChoice = "p"; }
 else if(computerChoice == 2) { computerChoice = "s"; }

setSelections();
}

determineWinOrLoss();
}

function determineWinOrLoss() {
 prompt.style.display = "none";

rock.style.display = "none";
 paper.style.display = "none";
 scissors.style.display = "none";

results.style.display = "block";

if((yourChoice == "r" && computerChoice == "r") || 
 (yourChoice == "p" && computerChoice == "p") || 
 (yourChoice == "s" && computerChoice == "s")) {
  draw.style.display = "block";
 } else if((yourChoice == "r" && computerChoice == "s") || 
           (yourChoice == "s" && computerChoice == "p") ||
           (yourChoice == "p" && computerChoice == "r")) {
  win.style.display = "block";
 } else if((yourChoice == "s" && computerChoice == "r") || 
           (yourChoice == "p" && computerChoice == "s") ||
           (yourChoice == "r" && computerChoice == "p")) {
  loss.style.display = "block";
 }
}