hackyourfuturecanada · hamzakoc · Sep 5, 2019 · Sep 21, 2019
diff --git a/game.js b/game.js
@@ -1,3 +1,107 @@
-// Write all your code here
-// Replace the contents of this file with your own code
-console.log('Hello, world!');
+
+
+
+
+
+
+
+
+let choices = ["rock", "paper", "scissors"];
+
+function computerPlay(){
+	return choices[Math.floor(Math.random()*3)] ;
+
+}
+
+
+
+let userScore=0;
+const userScoreSpan=document.querySelector("#user-score-s");
+const computerScoreSpan=document.querySelector("#comp-score-s");
+const result =document.querySelector('#result')
+
+function winner(playerSelection, computerSelection) {
+	userScore ++;
+	userScoreSpan.textContent=userScore;
+	result.textContent= "You win! " + playerSelection +" beats " +computerSelection+"." ;
+
+}
+
+let computerScore=0;
+function looser(playerSelection, computerSelection) {
+
+	computerScore ++;
+	computerScoreSpan.textContent=computerScore;
+	result.setAttribute('font-size', '25px');
+	result.textContent= "You Lose! " + playerSelection +" beats " +computerSelection+"." ;
+}
+
+
+function tie(playerSelection, computerSelection) {
+
+	result.textContent= "Tie";
+}
+
+
+
+
+
+
+function playRound(playerSelection){
+	const computerSelection = computerPlay();
+	switch (playerSelection+computerSelection){
+		case "rockscissors":
+		case "paperrock":
+		case "scissorspaper":
+			winner(playerSelection, computerSelection);
+			break;
+		case "rockpaper":
+		case "paperscissors":
+		case "scissorsrock":
+			looser(playerSelection, computerSelection);
+			break;
+		case "rockrock":
+		case "paperpaper":
+		case "scissorsscissors":
+			tie(playerSelection, computerSelection);
+			break;}
+	}
+
+
+	const rock = document.querySelector('#rock');
+	const paper = document.querySelector('#paper');
+	const scissors = document.querySelector('#scissors');
+
+
+function game (){
+
+			rock.addEventListener('click',  function(){
+				playRound('rock')
+			})
+
+
+			paper.addEventListener('click',  function(){
+				playRound('paper')
+			})
+
+
+			scissors.addEventListener('click',  function(){
+				playRound('scissors')
+			})
+
+}
+
+
+
+function fiveRound(){
+	for (i=0; i<5; i++){
+		let x =game(i);
+		return x
+	}
+}
+
+fiveRound();
+
+
+
+
diff --git a/images/paper.jpeg b/images/paper.jpeg
diff --git a/images/rock.jpeg b/images/rock.jpeg
diff --git a/images/scissors.jpeg b/images/scissors.jpeg
diff --git a/index.html b/index.html
@@ -4,7 +4,28 @@
     <meta charset="UTF-8">
     <title>Rock, Paper, Scissors!</title>
     <script src="game.js" defer></script>
+    <link rel = "stylesheet"   type = "text/css"   href = "style.css" />
 </head>
 <body>
+
+
+<div id="images">
+<img id="rock" src="images/rock.jpeg" height="250" width="180" >
+<img id="paper" src="images/paper.jpeg" height="250" width="180">
+<img id="scissors" src="images/scissors.jpeg" height="250" width="180">
+</div>
+
+<div id="result" style="font-size: 25px;">
+<p><strong>Choose one of the above to make your turn!</strong><p>
+
+</div>
+
+
+<div id="score">
+
+    <h2 id="user-score">Your Score:</h2> <span id="user-score-s">0</span>
+    <h2 id="comp-score">Computer Score:</h2>  <span id="comp-score-s">0</span>
+</div>
+
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,33 @@
+
+
+
+
+
+div{
+
+    margin-top:80px;
+    text-align: center;
+
+}
+
+h1 {
+
+    text-align: center;
+
+
+
+}
+
+
+
+img {
+    padding:20px;
+}
+
+
+
+img:hover{
+    height: 80%;
+    cursor: pointer
+
+}