codemistic · gantavyamalviya · Oct 2, 2022 · Oct 2, 2022
diff --git a/Rock-Paper-Scissors-Game/Readme.md.txt b/Rock-Paper-Scissors-Game/Readme.md.txt
@@ -0,0 +1,7 @@
+# Rock Paper Scissor Game
+
+## Tech Stack
+
+- HTML
+- CSS
+- JavaScript
diff --git a/Rock-Paper-Scissors-Game/index.html b/Rock-Paper-Scissors-Game/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Rock, Paper, Scissor Game</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+  <div class="wrapper">
+    <h1><u>Rock Paper Scissor Game </u></h1>
+  <div class="buttons">
+    <button class="rpsButton" value="Rock">✊</button>
+    <button class="rpsButton" value="Paper">🤚</button>
+    <button class="rpsButton" value="Scissors">✌</button>
+  </div>
+  <div class="resultContainer">
+  <div id="player-score"></div>
+  <div id="hands"></div>
+  <div id="result"></div>
+  <button id='endGameButton'>🔴</button>
+  </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Rock-Paper-Scissors-Game/script.js b/Rock-Paper-Scissors-Game/script.js
@@ -0,0 +1,86 @@
+
+const scores = {'computerScore':0 , 'playerScore':0}
+
+function getComputerChoice() {
+  let options = ['Rock','Paper','Scissors']
+  let n = Math.floor(Math.random()*3)
+
+  return options[n]
+}
+
+
+function getResult(playerChoice, computerChoice) {
+  // return the result of score based on if you won, drew, or lost
+  var score=0;
+  // All situations where human draws, set `score` to 0
+  if(playerChoice === computerChoice){
+    score = 0;
+  }else if(playerChoice==='Rock' && computerChoice==='Scissors'){
+   score = 1
+ }else if(playerChoice==='Paper' && computerChoice==='Rock'){
+   score = 1
+ }else if(playerChoice==='Scissors' && computerChoice==='Paper'){
+   score = 1
+
+ }else{
+   score = -1
+ }
+
+ return score
+}
+
+// ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice**
+function showResult(score, playerChoice, computerChoice) {
+
+  const resultDiv = document.getElementById('result')
+  const handsDiv = document.getElementById('hands')
+  const playerScoreDiv = document.getElementById('player-score')
+
+  if(score == -1){
+    resultDiv.innerText = 'You Lose!'
+  }else if(score == 1){
+    resultDiv.innerText = 'You Win!'
+  }else{
+    resultDiv.innerText = 'Draw!'
+  }
+
+  handsDiv.innerText=`🧑‍🦰 ${playerChoice} vs 🤖 ${computerChoice}`
+  playerScoreDiv.innerText =` Your Score:  ${scores['playerScore']}`
+}
+
+// ** Calculate who won and show it on the screen **
+function onClickRPS(playerChoice) {
+  const computerChoice = getComputerChoice()
+ const score = getResult(playerChoice.value,computerChoice)
+ scores['playerScore'] += score
+ showResult(score, playerChoice.value,computerChoice)
+}
+
+
+// ** Make the RPS buttons actively listen for a click and do something once a click is detected **
+function playGame() {
+  // use querySelector to select all RPS Buttons
+ const selection = document.querySelectorAll('.rpsButton')
+
+selection.forEach(clickks =>{
+  clickks.onclick = () => onClickRPS(clickks)
+})
+
+
+  // Add a click listener to the end game button that runs the endGame() function on click
+  let endGameButton = document.getElementById('endGameButton')
+  endGameButton.onclick = () => endGame()
+}
+
+// ** endGame function clears all the text on the DOM **
+function endGame() {
+  let playerScore = document.getElementById('player-score')
+  let hands = document.getElementById('hands')
+  let result = document.getElementById('result')
+  playerScore.innerText = ''
+  hands.innerText = ''
+  result.innerText = ''
+}
+
+// ** endGame function clears all the text on the DOM **
+playGame()
diff --git a/Rock-Paper-Scissors-Game/style.css b/Rock-Paper-Scissors-Game/style.css
@@ -0,0 +1,75 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin:0;
+}
+
+.wrapper {
+  background: #1c1c1c;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+
+.buttons {
+  display: flex;
+  gap: 20px;
+}
+
+button {
+  height: 100px;
+  width: 100px;
+  font-size: 48px;
+  border-radius: 30px;
+  cursor: pointer;
+
+}
+
+.resultContainer {
+  font-size: 2rem;
+  text-align: center;
+  margin-top: 20px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin:0;
+}
+
+.wrapper {
+  background: #1c1c1c;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+
+.buttons {
+  display: flex;
+  gap: 20px;
+}
+
+button {
+  height: 100px;
+  width: 100px;
+  font-size: 48px;
+  border-radius: 30px;
+  cursor: pointer;
+
+}
+
+.resultContainer {
+  font-size: 2rem;
+  text-align: center;
+  margin-top: 20px;
+}