acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 19, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/README.md b/Domains/Frontend/MiniProjects/RockPaperScissors/README.md
@@ -0,0 +1,69 @@
+**Contributor:** MeghPatel-007
+
+# 🎮 Rock-Paper-Scissors Game
+
+A fun and interactive **Rock-Paper-Scissors** game built with **HTML, CSS, and JavaScript**. Play against the computer and test your skills in multiple rounds! 🏆
+
+---
+
+## 📑 Table of Contents
+
+1. [✨ Features](#-features)
+2. [🎯 How to Play](#-how-to-play)
+3. [📂 Folder Structure](#-folder-structure)
+4. [📸 Screenshots](#-screenshots)
+5. [📝 License](#-license)
+
+---
+
+## ✨ Features
+
+- 🖥 Play against a computer opponent with random moves
+- 🏅 Keep track of scores across multiple rounds
+- 💬 Dynamic messages for **win**, **loss**, or **tie**
+- 🎨 Clean and responsive interface
+
+---
+
+## 🎯 How to Play
+
+1. Open the `index.html` file in your browser.
+2. Click on **Rock ✊**, **Paper ✋**, or **Scissors ✌️** to make your move.
+3. The computer will choose randomly.
+4. The winner of each round is displayed and scores are tracked automatically.
+5. Press **Reset Game 🔄** to start a new match.
+
+---
+
+## 📂 Folder Structure
+
+RockPaperScissors/
+├─ index.html # Main HTML file
+├─ style.css # Styling for the game
+├─ script.js # Game logic
+├─ paper.png # Paper image
+├─ rock.png # Rock image
+├─ scissors.png # Scissors image
+├─ rps icon.png # Favicon
+└─ README.md # This README file
+
+---
+
+## 📸 Screenshots
+
+![Game Screenshot](screenshot.png)
+
+---
+
+## 📝 License
+
+This project is licensed under the **MIT License**. See the LICENSE file for details.
+
+---
+
+## 🙏 Thank You
+
+Thanks for checking out my Rock-Paper-Scissors project!  
+I hope you enjoy playing it and have fun trying to beat the computer. 🎮✨
+
+Feel free to leave feedback or suggestions for improvement!
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/index.html b/Domains/Frontend/MiniProjects/RockPaperScissors/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RPS Game</title>
+    <link rel="shortcut icon" href="./rps icon.png" type="image/x-icon" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <!-- PLAY INTERFACE REMAINING -->
+    <div class="main">
+      <header>
+        <div class="title">
+          <h2>Rock Paper Scissor Game</h2>
+        </div>
+      </header>
+      <div class="scoreBoard">
+        <button class="scoreBox" id="scoreY">You - 0</button>
+        <button class="scoreBox" id="scoreC">Comp - 0</button>
+      </div>
+      <div class="gameBox">
+        <button class="btn" id="Paper"><img src="./paper.png" alt="" /></button>
+        <button class="btn" id="Scissors">
+          <img src="./scissors.png" alt="" />
+        </button>
+        <button class="btn" id="Rock"><img src="./rock.png" alt="" /></button>
+      </div>
+      <div class="display">
+        <div class="comment">"Beat me if you can!!!"</div>
+      </div>
+      <div class="footer">
+        <pre class="p">You -</pre>
+        <div class="optchoiced" id="choicedY"></div>
+        <pre class="p">Comp -</pre>
+        <div class="optchoiced" id="choicedC"></div>
+      </div>
+    </div>
+    <div class="pop-up visible">
+      <button class="cancel">X</button>
+      <div class="text">
+        <h2 class="pop-up-title">Congratulations!!!!</h2>
+      </div>
+      <div class="text">
+        <p class="pop-up-comment">You beat me</p>
+      </div>
+      <button class="resetBtn">Reset Game</button>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/paper.png b/Domains/Frontend/MiniProjects/RockPaperScissors/paper.png
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/rock.png b/Domains/Frontend/MiniProjects/RockPaperScissors/rock.png
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/rps icon.png b/Domains/Frontend/MiniProjects/RockPaperScissors/rps icon.png
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/scissors.png b/Domains/Frontend/MiniProjects/RockPaperScissors/scissors.png
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/screenshot.png b/Domains/Frontend/MiniProjects/RockPaperScissors/screenshot.png
diff --git a/Domains/Frontend/MiniProjects/RockPaperScissors/script.js b/Domains/Frontend/MiniProjects/RockPaperScissors/script.js
@@ -0,0 +1,136 @@
+let yPicker = document.querySelectorAll(".btn");
+let print = document.querySelector(".comment");
+let reset = document.querySelector(".resetBtn");
+let scoreC = document.querySelector("#scoreC");
+let scoreY = document.querySelector("#scoreY");
+let count = 0;
+let countY = 1;
+let countC = 1;
+let storageY = 0;
+let storageC = 0;
+let cancel = document.querySelector(".cancel");
+let popUp = document.querySelector(".pop-up");
+let comment1 = document.querySelector(".pop-up-comment");
+let printC = document.querySelector("#choicedC");
+let printY = document.querySelector("#choicedY");
+let comment2 = document.querySelector(".pop-up-title");
+
+const cChoice = () => {
+  let opt = ["Rock", "Paper", "Scissors"];
+  let i = Math.floor(Math.random() * 3);
+  return opt[i];
+};
+
+const ShowWinner = (yWin) => {
+  if (yWin) {
+    winner();
+    // console.log(`YOU = ${countY}`);
+    storageY = +countY;
+  } else {
+    loser();
+    // console.log(`COMP = ${countC}`);
+    storageC = +countC;
+  }
+  // console.log(storageY);
+  // console.log(storageC);
+  comparison();
+};
+
+const core = (You) => {
+  // console.log("you =",You);
+  printY.innerText = You;
+  let Comp = cChoice();
+  // console.log("comp =",Comp);
+  printC.innerText = Comp;
+  if (You === Comp) {
+    draw();
+  } else {
+    let yWin = true;
+    if (You === "Rock") {
+      yWin = Comp === "Paper" ? false : true;
+    } else if (You === "Paper") {
+      yWin = Comp === "Scissors" ? false : true;
+    } else {
+      yWin = Comp === "Rock" ? false : true;
+    }
+    ShowWinner(yWin);
+  }
+  counter();
+};
+
+yPicker.forEach((btn) => {
+  // console.log(btn);
+  btn.addEventListener("click", () => {
+    let You = btn.getAttribute("id");
+    count++;
+    // console.log(count);
+    core(You);
+  });
+});
+
+reset.addEventListener("click", () => {
+  // console.log(scoreC);
+  scoreC.innerText = "Comp - 0";
+  scoreY.innerText = "You - 0";
+  no = 1;
+  count = 0;
+  countY = 1;
+  countC = 1;
+  scoreC.style.color = "white";
+  scoreY.style.color = "white";
+  popUp.classList.add("visible");
+  print.style.color = "white";
+  print.innerText = "Try again Child!!!";
+});
+const winner = () => {
+  // console.log("You Win");
+  print.innerText = "You Win";
+  scoreY.innerText = `You - ${countY++}`;
+  scoreY.style.color = "#36BA98";
+  scoreC.style.color = "#E76F51";
+  print.style.color = "#36BA98";
+};
+const loser = () => {
+  // console.log("You lose");
+  print.innerText = "You lose";
+  scoreC.innerText = `Comp - ${countC++}`;
+  scoreY.style.color = "#E76F51";
+  scoreC.style.color = "#36BA98";
+  print.style.color = "#E76F51";
+};
+const draw = () => {
+  // console.log("Its a Draw");
+  print.innerText = "Its a Draw";
+  print.style.color = "#ffff44";
+  scoreY.style.color = "#ffff44";
+  scoreC.style.color = "#ffff44";
+};
+
+const counter = () => {
+  console.log(count);
+  if (count % 10 === 0) {
+    popUp.classList.remove("visible");
+  } else {
+    popUp.classList.add("visible");
+  }
+};
+
+cancel.addEventListener("click", () => {
+  popUp.classList.add("visible");
+});
+
+const comparison = () => {
+  // console.log(storageC);
+  // console.log(storageY);
+
+  if (storageY > storageC) {
+    comment1.innerText = "You beat me,bruh!!";
+    comment2.innerText = "Congratulaions!!!";
+  } else if (storageY < storageC) {
+    comment1.innerText = "HA!!! loser can't beat me";
+    comment2.innerText = "Loser!!!";
+  } else {
+    comment1.innerText = "I have never such a tough player";
+    comment2.innerText = "Tie!!!";
+  }
+};