Add files via upload

Nishanthnaa52 · Mar 29, 2024 · a3cb5be · a3cb5be
commit a3cb5be
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 0 deletions.
diff --git a/img/paper-emoji.png b/img/paper-emoji.png
diff --git a/img/rock-emoji.png b/img/rock-emoji.png
diff --git a/img/scissors-emoji.png b/img/scissors-emoji.png
diff --git a/index.css b/index.css
@@ -0,0 +1,59 @@
+body {
+    background-color: rgb(25,25,25);
+    color: white;
+    font-family: Arial, Helvetica, sans-serif
+}
+
+button {
+    background-color: white;
+}
+
+.title-of-page {
+    font-size: 44px;
+    font-weight: bold;
+    word-spacing: 10px;
+    padding-left: 10px;
+}
+
+.icon-box {
+    word-spacing: 20px;
+}
+
+.reset-button {
+    padding: 8px 13px;
+    font-size: 15px;
+    border: none;
+}
+
+.move-icon {
+   height: 50px;
+}
+
+.move-button {
+    background: transparent;
+    border: 2px solid white;
+    border-style: dotted;
+    padding: 30px;
+    border-radius: 50%;
+    margin: 5px;
+    cursor: pointer;
+}
+
+.result {
+    font-size: 25px;
+    font-weight: bold;
+}
+
+.result-icon {
+    height: 90px;
+    margin-bottom: 20px;
+    margin-left: 30px;
+}
+
+.reset-button {
+    margin-top: 20px;
+    padding: 20px 30px;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Rock paper scissors</title>
+    <link rel="stylesheet" href="index.css">
+  </head>
+  <body>
+    <center>
+      <p class="title-of-page">Rock Paper Scissors</p>
+      <p class="icon-box">
+        <button class="move-button" onclick = "finalResult('rock');"><img class="move-icon" src="img/rock-emoji.png" ></button>
+
+        <button class="move-button" onclick = "finalResult('paper');"><img class="move-icon" src="img/paper-emoji.png"></button>
+
+        <button class="move-button" onclick = "finalResult('scissors');"><img class="move-icon" src="img/scissors-emoji.png"></button>
+      </p>
+      <p class="displayresult result"></p>
+      <p class="display-move"></p>
+      <p class="score-display"></p>
+      <button class="reset-button" onclick = "score.wins = 0;score.losses = 0;score.ties = 0;localStorage.removeItem('score');display();">Reset score</button>
+    </center>
+  </body>
+  <script src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,90 @@
+let score = JSON.parse(localStorage.getItem('score')) || {
+    wins : 0,
+    losses : 0,
+    ties : 0
+  };
+
+if(!score) { //score === null
+    score = {
+        wins : 0,
+        losses : 0,
+        ties : 0
+    };
+}
+
+function display() {
+    document.querySelector('.score-display').innerHTML = `Win:${score.wins} losses:${score.losses} tie:${score.ties}`;
+}
+
+display();
+
+function pikeComputerMove() {
+
+const randomNumber = Math.random();
+let computerMove = '';
+
+if(randomNumber >= 0 && randomNumber < 1 / 3){
+    computerMove = 'rock';
+} else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) {
+    computerMove = 'paper';
+}else if (randomNumber >= 2 / 3 && randomNumber < 1){
+    computerMove = 'scissors';
+}
+return computerMove;
+}
+
+function finalResult(playerMove) {
+    const computerMove = pikeComputerMove();
+    let result = '';
+
+    if(playerMove === 'rock'){
+
+        if(computerMove === 'rock'){
+            result = 'Tie.';
+        } else if(computerMove === 'paper'){
+            result = 'You lose.';
+        } else if(computerMove === 'scissors'){
+            result = 'You win.';
+        }
+
+    }else if(playerMove === 'paper') {
+
+        if(computerMove === 'paper'){
+            result = 'Tie.';
+        } else if(computerMove === 'scissors'){
+            result = 'You lose.';
+        } else if(computerMove === 'rock'){
+            result = 'You win.';
+        }  
+
+    }else if(playerMove === 'scissors') {
+
+        if(computerMove === 'scissors'){
+            result = 'Tie.';
+        } else if(computerMove === 'rock'){
+            result = 'You lose.';
+        } else if(computerMove === 'paper'){
+            result = 'You win.';
+        }
+
+    }
+
+    if (result === 'You win.') {
+        score.wins +=1;
+    }else if (result === 'You lose.') {
+        score.losses +=1;
+    }else {
+        score.ties += 1;
+    }
+
+    document.querySelector('.display-move').innerHTML = `You
+        <img class="result-icon" src="./img/${playerMove}-emoji.png">
+        <img class="result-icon" src="./img/${computerMove}-emoji.png">
+        Computer`;
+    document.querySelector('.displayresult').innerHTML = `${result}`;
+
+    localStorage.setItem('score',JSON.stringify(score));
+
+    display();
+
+}