🐵🚨 Updated with Glitch

.glitch-assets

@@ -0,0 +1,17 @@
+{"name":"paper-removebg-preview.png","date":"2021-12-15T22:39:04.543Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview.png","type":"image/png","size":28410,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview.png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"yNvSYfSXJszebF2e"}
+{"name":"paper.jpg","date":"2021-12-15T22:39:22.546Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper.jpg","type":"image/jpeg","size":11943,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper.jpg","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"vUCjKYBtYQpMwi7r"}
+{"uuid":"vUCjKYBtYQpMwi7r","deleted":true}
+{"name":"rock-removebg-preview.png","date":"2021-12-15T22:40:35.283Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview.png","type":"image/png","size":18580,"imageWidth":207,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview.png","thumbnailWidth":207,"thumbnailHeight":220,"uuid":"7PkQoHXP2IkbcViZ"}
+{"name":"Screenshot_2021-12-08_181708-removebg-preview (1).png","date":"2021-12-15T22:40:43.065Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview%20(1).png","type":"image/png","size":22995,"imageWidth":236,"imageHeight":182,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview%20(1).png","thumbnailWidth":236,"thumbnailHeight":182,"uuid":"yEpblEdvsWjfokyt"}
+{"name":"download.png","date":"2021-12-15T22:42:39.362Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download.png","type":"image/png","size":22153,"imageWidth":207,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download.png","thumbnailWidth":207,"thumbnailHeight":220,"uuid":"8vikUtqci0bj2tzB"}
+{"name":"paper-removebg-preview (1).png","date":"2021-12-15T22:43:44.611Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview%20(1).png","type":"image/png","size":21576,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview%20(1).png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"gbPC3NDrtyaGJZcn"}
+{"uuid":"gbPC3NDrtyaGJZcn","deleted":true}
+{"name":"paper-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:44:00.299Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview__1_-removebg-preview.png","type":"image/png","size":22752,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview__1_-removebg-preview.png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"nosqiEuBxet8iWzb"}
+{"uuid":"8vikUtqci0bj2tzB","deleted":true}
+{"name":"rock-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:45:55.384Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview__1_-removebg-preview.png","type":"image/png","size":15433,"imageWidth":206,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview__1_-removebg-preview.png","thumbnailWidth":206,"thumbnailHeight":220,"uuid":"VIsfnVhb0TeT1v50"}
+{"name":"Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:48:17.402Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","type":"image/png","size":19011,"imageWidth":236,"imageHeight":182,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","thumbnailWidth":236,"thumbnailHeight":182,"uuid":"atiNLgfYfFqOOVOj"}
+{"name":"download-removebg-preview.png","date":"2021-12-15T22:49:22.696Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download-removebg-preview.png","type":"image/png","size":15313,"imageWidth":206,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download-removebg-preview.png","thumbnailWidth":206,"thumbnailHeight":220,"uuid":"BtFyFvcffe1e6m8X"}
+{"uuid":"7PkQoHXP2IkbcViZ","deleted":true}
+{"name":"images.jpg","date":"2022-01-05T23:01:59.601Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/images.jpg","type":"image/jpeg","size":1266,"imageWidth":262,"imageHeight":192,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/images.jpg","thumbnailWidth":262,"thumbnailHeight":192,"uuid":"3TTNY4QUWOwJQbij"}
+{"name":"High_resolution_wallpaper_background_ID_77700451514-692x376.jpg","date":"2022-01-05T23:05:13.382Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/High_resolution_wallpaper_background_ID_77700451514-692x376.jpg","type":"image/jpeg","size":11821,"imageWidth":692,"imageHeight":376,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/thumbnails%2FHigh_resolution_wallpaper_background_ID_77700451514-692x376.jpg","thumbnailWidth":330,"thumbnailHeight":180,"uuid":"nL5A6nwgkeqhp7kM"}
+{"name":"xF4zkp.jpg","date":"2022-01-05T23:13:01.520Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/xF4zkp.jpg","type":"image/jpeg","size":499661,"imageWidth":1680,"imageHeight":1050,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/thumbnails%2FxF4zkp.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"OBGDLJsCCgm9it0p"}

README.md

@@ -15,78 +15,78 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper,
 #### GitHub Set-Up
 
 - [x] Go to the repository at https://github.com/itscodenation/rockpaperscissors
-- [ ] Fork this repository to your Github account and import to a new workspace
-- [ ] Link and commit your changes
-- [ ] Make your site live on GitHub Pages
+- [x] Fork this repository to your Github account and import to a new workspace
+- [x] Link and commit your changes
+- [x] Make your site live on GitHub Pages
 
 #### Code Walkthrough
 
-- [ ] Read through the starter code given so you understand how the HTML is organized
+- [x] Read through the starter code given so you understand how the HTML is organized
 
 ### Day 1 Goal 2: Capture user input and display it to the screen
 
-- [ ] Add a click handler that saves the value of the user's input to a variable
-- [ ] Display the user input value on the screen, in the user choice location
+- [x] Add a click handler that saves the value of the user's input to a variable
+- [x] Display the user input value on the screen, in the user choice location
 
 #### Wrap
 
-- [ ] Commit your changes!
+- [x] Commit your changes!
 
 ## Day 2
 
 ### Day 2 Goal 1: Generate a new random number every time the user clicks the button
 
-- [ ] Outside of your click handler, declare a randomNumber variable and set it equal to 0
-- [ ] In your click handler, generate a random number and assign it to the randomNumber variable
+- [x] Outside of your click handler, declare a randomNumber variable and set it equal to 0
+- [x] In your click handler, generate a random number and assign it to the randomNumber variable
 
 ### Day 2 Goal 2: Display the random number to the screen
 
-- [ ] Display the randomNumber value on the screen, in the computer choice location
+- [x] Display the randomNumber value on the screen, in the computer choice location
 
 #### Wrap
 
-- [ ] Commit your changes!
+- [x] Commit your changes!
 
 ## Day 3
 
 ### Day 3 Goal 1: Assign different computer choices depending on the random number
 
-- [ ] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable
-- [ ] Update the computer choice location so it displays the computerChoice to the screen
+- [x] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable
+- [x] Update the computer choice location so it displays the computerChoice to the screen
 
 ### Day 3 Goal 2: Increase user experience (BONUS!)
 
-- [ ] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input
+- [x] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input
 
 ## Day 4
 
 ### Day 4 Goal 1: Compare the user choice and computer choice to determine a winner
 
-- [ ] Write a compound conditional statement that compares the userChoice to the computerChoice
-- [ ] Declare a variable to save the winner of the game
-- [ ] Display the winner to the screen in the result div
+- [x] Write a compound conditional statement that compares the userChoice to the computerChoice
+- [x] Declare a variable to save the winner of the game
+- [x] Display the winner to the screen in the result div
 
 ### Day 4 Goal 2: Increase user experience (BONUS!)
 
-- [ ] Test that your game performs correctly in case of a tie
-- [ ] Clear the input value once a result is displayed so your game is ready to play again
+- [x] Test that your game performs correctly in case of a tie
+- [x] Clear the input value once a result is displayed so your game is ready to play again
 
 #### Wrap
 
-- [ ] Commit your changes!
+- [x] Commit your changes!
 
 #### Day 5
 
 ### Day 5 Goal 1: Create a function to handle your computer choice logic
 
-- [ ] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice
-- [ ] Move your `Math.random` inside your function
-- [ ] Move your conditional logic that determines the computer choice inside your function
+- [x] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice
+- [x] Move your `Math.random` inside your function
+- [x] Move your conditional logic that determines the computer choice inside your function
 
 ### Day 5 Goal 2: Call your getRandomComputerChoice function
 
-- [ ] Call your function inside your click handler so that it determines the value of your computerChoice variable
-  - [ ] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called
+- [x] Call your function inside your click handler so that it determines the value of your computerChoice variable
+- [x] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called
 
 #### Wrap
 

css/style.css

@@ -1,7 +1,67 @@
 .row {
   text-align: center;
+  font-family: 'Nanum Gothic', sans-serif;
 }
 .choices {
   display: flex;
   justify-content: space-between;
 }
+
+.userPaper {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+.computerPaper {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+.userScissor {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+.computerScissor {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+.userRock {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+.computerRock {
+  display: none;
+  width: 200px;
+  height: 200px;
+}
+
+body {
+  background: url("https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/High_resolution_wallpaper_background_ID_77700451514-692x376.jpg?v=1641423913382");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+html {
+  height: 100%;
+}
+
+
+@keyframes moveUpanDown {
+    0% {
+/*         transform:  translateY(where ever this is in pixels); */
+    }
+    50%{
+/*         transform: translateY(whenever this goes down) ; */
+    }
+    100%{
+/*         transform:  translateY(goes back up to origin); */
+    }
+}

index.html

@@ -4,6 +4,9 @@
     <title>RPS Game</title>
     <!-- Link CSS here -->
     <link type="text/css" rel="stylesheet" href="css/style.css" />
+    <script src='jquery-3.2.1.min.js'></script>
+    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
+
   </head>
 
   <body>
@@ -16,19 +19,45 @@ <h3>Please Submit Your Choice Below</h3>
         <input class="input" />
         <button class="play">play!</button>
       </div>
-
+    <div>
+      <button class ="clear">clear</button>
+      </div>
       <div class="choices" class="row">
         <div>
           <h4>User Choice</h4>
+
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview.png?v=1639607944543" class="userPaper">
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview%20(1).png?v=1639608043065" class="userScissor">
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview__1_-removebg-preview.png?v=1639608355384" class="userRock">
+
           <p class="userChoice"></p>
         </div>
         <div>
           <h4>Computer Choice</h4>
+
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview__1_-removebg-preview.png?v=1639608240299" class="computerPaper">
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png?v=1639608497402" class="computerScissor">
+          <img src="https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download-removebg-preview.png?v=1639608562696" class="computerRock">
           <p class="computerChoice"></p>
         </div>
       </div>
       <div class="result"></div>
     </div>
+    <div>
+      <p class = "wins"></p>
+    </div>
+    <div>
+      <p class = "loses"></p>
+    </div>
+    <div>
+      <p class = "ties"></p>
+    </div>
+    <div>
+      <p class = "winRate"></p>
+    </div>
+     <div>
+      <p class = "games"></p>
+    </div>
 
     <!-- Link JQuery here -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

js/script.js

@@ -1 +1,125 @@
+let totalWins = 0;
+let totalTies = 0;
+let totalLoses = 0;
+let totalGames = 0;
 
+function getRandomComputerChoice() {
+  let randomNumber = Math.floor(Math.random() * 3);
+
+  let choice;
+
+  if (randomNumber === 0) {
+    choice = "rock";
+  } else if (randomNumber === 1) {
+    choice = "scissors";
+  } else {
+    choice = "paper";
+  }
+
+  return choice; // value = "rock", "paper", "scissors"
+}
+
+$(".clear").click(function () {
+  $(".input").val("");
+  $(".userChoice").text("");
+  $(".result").text("");
+  $(".computerChoice").text("");
+});
+
+function userChoice(user_choices) {
+  user_choices = $(".input").val();
+  $(".userChoice").text(user_choices);
+
+  user_choices = user_choices.toLowerCase();
+  return user_choices;
+}
+function chooseWinner(user_choice, computer_choice) {
+  let result;
+
+  if (user_choice === "rock") {
+    $(".userRock").show();
+    $(".userScissor").hide();
+    $(".userPaper").hide();
+  } else if (user_choice === "paper") {
+    $(".userPaper").show();
+    $(".userScissor").hide();
+    $(".userRock").hide();
+  } else {
+    $(".userScissor").show();
+    $(".userPaper").hide();
+    $(".userRock").hide();
+  }
+
+  if (computer_choice === "rock") {
+    $(".computerRock").show();
+    $(".computerScissor").hide();
+    $(".computerPaper").hide();
+  } else if (computer_choice === "paper") {
+    $(".computerPaper").show();
+    $(".computerScissor").hide();
+    $(".computerRock").hide();
+  } else {
+    $(".computerScissor").show();
+    $(".computerRock").hide();
+    $(".computerPaper").hide();
+  }
+
+  console.log(user_choice);
+
+  $(".computerChoice").text(computer_choice);
+  // console.log(userChoice());
+
+  if (user_choice == "rock" && computer_choice == "scissors") {
+    result = "User Wins!";
+    totalWins = totalWins + 1;
+  } else if (user_choice == "rock" && computer_choice == "rock") {
+    result = "You Tied, no one wins!";
+    totalTies = totalTies + 1;
+  } else if (user_choice == "rock" && computer_choice == "paper") {
+    result = "You Lost, Computer Wins!";
+    totalLoses = totalLoses + 1;
+  } else if (user_choice == "paper" && computer_choice == "rock") {
+    result = "User Wins!";
+    totalWins = totalWins + 1;
+  } else if (user_choice == "paper" && computer_choice == "scissors") {
+    result = "You Lost, Computer Wins!";
+    totalLoses = totalLoses + 1;
+  } else if (user_choice == "paper" && computer_choice == "paper") {
+    result = "You Tied, no one wins!";
+    totalTies = totalTies + 1;
+  } else if (user_choice == "scissors" && computer_choice == "scissors") {
+    result = "You Tied, no one wins!";
+    totalTies = totalTies + 1;
+  } else if (user_choice == "scissors" && computer_choice == "rock") {
+    result = "You Lost, Computer Wins!";
+    totalLoses = totalLoses + 1;
+  } else if (user_choice == "scissors" && computer_choice == "paper") {
+    result = "User Wins!";
+    totalWins = totalWins + 1;
+  } else {
+    $(".result").append(`<p>Your input is invalid, try again.<p>`);
+  }
+
+  $(".result").text(result);
+  // use 'result'
+}
+
+$(".play").click(function () {
+  // what ever this is.style.animation="moveUpandDown 3s linear infinite"
+
+  let computer_choice = getRandomComputerChoice();
+
+  let user_choice = userChoice();
+
+  totalGames = totalGames + 1;
+  let winRate = totalWins / totalGames;
+  winRate = winRate.toFixed(2);
+  $(".ties").text("You have tied" + totalTies + "times");
+  $(".loses").text("You have lost" + totalLoses + "times");
+  $(".wins").text("You have won" + totalWins + "times");
+
+  $(".games").text("You have played" + totalGames + "times");
+  $(".winRate").text("Your win rate is" + winRate + "percent");
+
+  chooseWinner(user_choice, computer_choice);
+});