hackyourfuturecanada · HomamS · Sep 5, 2019 · Sep 22, 2019
diff --git a/game.js b/game.js
@@ -1,3 +1,99 @@
 // Write all your code here
 // Replace the contents of this file with your own code
-console.log('Hello, world!');
+
+
+const list=['Rock', 'Paper', 'Scissors'];
+function computerPlay(){
+  return list[Math.floor(Math.random()*list.length)];
+}
+// console.log(computerPlay(list));
+
+let roundResult = "";
+function playRound(playerSelection, computerSelection){
+  // const playerSelection = prompt("please chose whether Rock, Paper or Scisers");
+  if(playerSelection==computerSelection){
+    roundResult = "Please play again!";
+    return "No Winner";
+
+  }
+
+  if(playerSelection=="Rock" && computerSelection=="Paper") {
+    roundResult = " You lose :(";
+    return "You lose";
+  }
+  else if(playerSelection=="Paper" && computerSelection=="Rock") {
+    roundResult = "Congratulation You Win :)";
+    return " You Win";
+  }
+  else if(playerSelection=="Rock" && computerSelection=="Scissors") {
+    roundResult = "Congratulation You Win :)";
+    return "You Win";
+
+  }
+  else if(playerSelection=="Scissors" && computerSelection=="Rock") {
+    roundResult = " You lose :(";
+    return "You lose";
+
+  }
+  else if(playerSelection=="Scissors" && computerSelection=="Paper") {
+    roundResult = "Congratulation You Win :)"
+    return "You Win";
+
+  }
+  else if(playerSelection=="Paper" && computerSelection=="Scissors") {
+    roundResult = " You lose :(";
+    return "You lose";
+
+  }
+
+
+}
+
+// console.log(playRound(computerPlay()));
+
+//   function game(){
+//     var play=[];
+//     for( let i=0; i<4; i++){
+//     play[i] = playRound(computerPlay());
+//     }
+// console.log(play);
+//     }
+// game();
+let playerScore = 0;
+let computerScore = 0;
+function play(playerSelection){
+  let round = playRound(playerSelection, computerPlay());
+
+  let result = document.createElement("li");
+  result.innerHTML = roundResult;
+  document.getElementById("score").appendChild(result);
+
+  if(round === "You lose"){
+    computerScore++;
+  }
+    else if("You Win"){
+    playerScore++
+  }
+
+  if(playerScore === 5){
+
+    document.getElementById("result").innerHTML = "You Win....:) <br> <a href=''>Start Over</a>";
+
+  }
+   else if(computerScore === 5){
+
+    document.getElementById("result").innerHTML = "You lose....:( <br> <a href=''>Start Over</a>"
+  }
+
+}
+ document.getElementById("rock").addEventListener('click',function() {
+  play("Rock");
+ });
+
+ document.getElementById("paper").addEventListener('click',function() {
+  play("Paper");
+  });
+
+ document.getElementById("scissors").addEventListener('click',function() {
+  play("Scissors");
+  });
diff --git a/index.html b/index.html
@@ -1,10 +1,80 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <script type="index/javascri">
+
+  </script>
     <meta charset="UTF-8">
     <title>Rock, Paper, Scissors!</title>
     <script src="game.js" defer></script>
+    <style media="screen">
+      body{
+
+        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjtSXG8POHnpEsElyE3ZQwVWHw44yJ7BYwuALw9385d9rafMqh");
+      }
+      h1, h2{
+        text-align: center;
+        color: white;
+      }
+      div{
+        padding: 30px;
+
+      }
+      .button{
+        text-align: center;
+        background-color: rgba(100, 88, 158, 0.2);
+      }
+      button{
+          padding: 30px;
+          text-align: center;
+          margin: 10px;
+          font-size: 10px;
+          border-radius: 10px;
+          font-weight: bold;
+          background-color: white;
+      }
+      img{
+        width: 80px;
+      }
+      .score {
+        height: auto;
+        margin: 1px;
+        padding: 1px;
+        background-color: rgba(191, 185, 182, 0.8);
+        font-size: 13px;
+        text-align: center;
+        font-weight: bold;
+
+      }
+      .result{
+
+       height: auto;
+       margin: 5px;
+       padding: 5px;
+       background-color: rgb(141, 110, 57);
+
+      }
+
+
+    </style>
 </head>
 <body>
+  <h1>Rock, Paper, Scissors! Game... </h1>
+  <h2> Click on your Choise Below!! </h2>
+  <div class="button">
+    <button id="rock" type="button" name="Rock"><img src = "https://static.thenounproject.com/png/477918-200.png"></button>
+    <button id="paper" type="button" name="Paper"><img src = "https://static.thenounproject.com/png/477922-200.png"></button>
+    <button id="scissors" type="button" name="Scissors"><img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQd98LEAPVyUJ9FviL1yMPC5U9_qr0fNKUtvvvRTO1Nkmrxs4_7"></button>
+  </div>
+
+  <div id="score" class="score">
+  <h2>The Record of rounds..</h2>
+  </div>
+
+  <div id="result">
+    <h2> The result ...!   </h2>
+  </div>
+
+
 </body>
 </html>