hackyourfuturecanada · esyasar · Sep 5, 2019 · Sep 23, 2019
diff --git a/game.js b/game.js
@@ -1,3 +1,54 @@
-// Write all your code here
-// Replace the contents of this file with your own code
-console.log('Hello, world!');
+
+const options = ['rock', 'paper', 'scissors'];
+
+document.getElementById('rock').addEventListener('click', function(e){
+    let round = playRound('rock', computerPlay());
+});
+document.getElementById('paper').addEventListener('click', function(e){
+    let round = playRound('paper', computerPlay());
+});
+document.getElementById('scissors').addEventListener('click', function(e){
+    let round = playRound('scissors', computerPlay());
+});
+
+//computer's choice
+function computerPlay() {
+    return options[Math.floor(Math.random() * options.length)];
+}
+
+function addPointsToUser(){
+  points += 1;
+  document.getElementById("userScore")[0].innerHTML = points;
+}
+
+function addPointsToComp(){
+  points += 1;
+  document.getElementById("pcScore")[1].innerHTML = points;
+}
+
+
+function playRound(playerSelection, computerSelection) {
+
+if (playerSelection === computerSelection) {
+  document.getElementById("p").innerHTML = "You made the same choice! Try Again";
+
+  } else if((playerSelection === 'paper' && computerSelection === 'rock') ||
+       (playerSelection === 'rock' && computerSelection === 'scissors') ||
+       (playerSelection === 'scissors' && computerSelection === 'paper')) {
+            document.getElementById("p").innerHTML = "You win! You chose:" + playerSelection;
+            addPointsToUser();
+          }
+          else{  document.getElementById("p").innerHTML = "Computer win!";
+          addPointsToComp();
+  }
+}
+
+ /* function game() {
+  let rounds= 0;
+while (rounds < 5) {
+const result = playRound(playerSelection, computerPlay());
+const whoisthewinner = prompt(result);
+rounds++;
+  }
+}
+game(); */
diff --git a/images/paper.png b/images/paper.png
diff --git a/images/rock.png b/images/rock.png
diff --git a/images/scissors.png b/images/scissors.png
diff --git a/index.html b/index.html
@@ -3,8 +3,49 @@
 <head>
     <meta charset="UTF-8">
     <title>Rock, Paper, Scissors!</title>
+    <link rel="stylesheet" href="style.css">
     <script src="game.js" defer></script>
 </head>
 <body>
+
+<header>
+<h1 id="header">Rock, Paper, Scissors!</h1>
+</header>
+
+<p id="do-it-message"> MAKE YOUR MOVE! </p>
+
+<div class ="scoreBoard">
+
+<div id= "userLabel"> user - comp </div>
+
+<span id = "userScore"> 0 <span> : <span id = "pcScore"> 0 <span>
+
+</div>
+
+<p id="p"></p>
+
+<div class="choices">
+
+  <div class = "choice" id="r">
+    <img id="rock" src="images/rock.png" alt="rockpic">
+ </div>
+
+    <div class = "choice" id="p">
+    <img id="paper" src="images/paper.png" alt="paperpic">
+  </div>
+
+    <div class = "choice" id="s">
+    <img id="scissors" src="images/scissors.png" alt="scissorspic">
+</div>
+
+</div>
+
+
+
+
+
+
+<div> </div>
+
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,70 @@
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Alegreya|Cardo|Permanent+Marker&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#header {
+  background-color:  rgb(179, 0, 0);
+  font-size: 100px;
+  margin: 10px;
+}
+
+#do-it-message{
+  font-size: 35px;
+  text-align: center;
+  color: rgb(0, 204, 204);
+  font-family: 'Permanent Marker', cursive;
+}
+
+header > h1 {
+  color: black;
+  text-align: center;
+font-family: 'Bangers', cursive;
+}
+
+.scoreBoard {
+  margin: 22px auto;
+  border: 3px solid black;
+  text-align: center;
+  width: 300px;
+  color: rgb(0, 102, 102);
+  font-size: 30px;
+  padding: 15px 20px;
+  font-family:'Permanent Marker', cursive;
+font-family: 'Alegreya', serif;
+font-family: 'Cardo', serif;
+}
+
+#p{
+  text-align: center;
+  font-family: 'Playfair Display', serif;
+  font-size: 30px;
+  color: rgb(179, 0, 0);
+
+}
+.choices{
+  text-align: center;
+  margin: 50px 0;
+}
+
+img {
+  width: 300px;
+}
+
+.choice{
+  border-radius: 50%;
+  margin: 0 20px;
+  padding: 10px;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+.choice:hover{
+curser: pointer;
+background-color: rgb(179, 0, 0);
+}