commitra · Hrishikesh-Dalal · Oct 16, 2025 · Oct 15, 2025
diff --git a/projects/rock-paper-scissors/index.html b/projects/rock-paper-scissors/index.html
@@ -9,12 +9,18 @@
 <body>
   <h1>Rock-Paper-Scissors Game</h1>
   <div id="rps-container">
-    <!-- TODO: Buttons for Rock, Paper, Scissors -->
-    <!-- TODO: Display user and computer choices -->
-    <!-- TODO: Show result (win/lose/draw) -->
-    <!-- TODO: Scoreboard for user and computer -->
-    <!-- TODO: Option to restart game -->
+    <div class="btn-group">
+      <button class="rps-btn" data-choice="rock">Rock</button>
+      <button class="rps-btn" data-choice="paper">Paper</button>
+      <button class="rps-btn" data-choice="scissors">Scissors</button>
+    </div>
+    <div id="display-choices"></div>
+    <div id="result"></div>
+    <div id="scoreboard">
+      <span id="user-score">0</span> : <span id="computer-score">0</span>
+    </div>
+    <button id="restart-btn">Restart</button>
   </div>
   <script src="main.js"></script>
 </body>
-</html>
+</html>
diff --git a/projects/rock-paper-scissors/main.js b/projects/rock-paper-scissors/main.js
@@ -1,14 +1,75 @@
-// TODO: Handle user selection (rock, paper, scissors)
-// TODO: Generate computer choice
-// TODO: Determine winner/loser/draw
-// TODO: Update and display scoreboard
-// TODO: Restart game functionality
-
 function initRockPaperScissors() {
-  // TODO: Handle user choice
-  // TODO: Generate computer choice
-  // TODO: Determine winner
-  // TODO: Update scoreboard
+  const choices = ["rock", "paper", "scissors"];
+  let userScore = 0;
+  let computerScore = 0;
+
+  const userScoreSpan = document.getElementById("user-score");
+  const computerScoreSpan = document.getElementById("computer-score");
+  const resultDiv = document.getElementById("result");
+  const displayChoicesDiv = document.getElementById("display-choices");
+  const btns = document.querySelectorAll(".rps-btn");
+  const restartBtn = document.getElementById("restart-btn");
+
+  function getComputerChoice() {
+    return choices[Math.floor(Math.random() * 3)];
+  }
+
+  function getResult(user, computer) {
+    if (user === computer) return "draw";
+    if (
+      (user === "rock" && computer === "scissors") ||
+      (user === "paper" && computer === "rock") ||
+      (user === "scissors" && computer === "paper")
+    )
+      return "win";
+    return "lose";
+  }
+
+  function displayScores() {
+    userScoreSpan.textContent = userScore;
+    computerScoreSpan.textContent = computerScore;
+  }
+
+  function handleClick(e) {
+    const userChoice = e.target.dataset.choice;
+    const computerChoice = getComputerChoice();
+    const outcome = getResult(userChoice, computerChoice);
+    displayChoicesDiv.textContent = `You: ${capitalize(
+      userChoice
+    )} | Computer: ${capitalize(computerChoice)}`;
+    if (outcome === "win") {
+      userScore++;
+      resultDiv.textContent = "You win!";
+      resultDiv.style.color = "#349946";
+    } else if (outcome === "lose") {
+      computerScore++;
+      resultDiv.textContent = "You lose!";
+      resultDiv.style.color = "#d43d29";
+    } else {
+      resultDiv.textContent = "It's a draw!";
+      resultDiv.style.color = "#4078b3";
+    }
+    displayScores();
+  }
+
+  function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  btns.forEach((btn) => {
+    btn.addEventListener("click", handleClick);
+  });
+
+  restartBtn.addEventListener("click", function () {
+    userScore = 0;
+    computerScore = 0;
+    displayScores();
+    resultDiv.textContent = "";
+    displayChoicesDiv.textContent = "";
+  });
+
+  // Initial score display
+  displayScores();
 }
 
-window.addEventListener('DOMContentLoaded', initRockPaperScissors);
+window.addEventListener("DOMContentLoaded", initRockPaperScissors);
diff --git a/projects/rock-paper-scissors/styles.css b/projects/rock-paper-scissors/styles.css
@@ -1 +1,109 @@
-/* TODO: Style RPS container, buttons, choices display, scoreboard, restart button */
+body {
+  font-family: "Segoe UI", Arial, sans-serif;
+  background: linear-gradient(120deg, #e0e7ff, #f5f5fa 60%);
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  text-align: center;
+  color: #2744ae;
+  margin-top: 2.2em;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+#rps-container {
+  background: #fff;
+  padding: 2em 2.5em 2.2em 2.5em;
+  border-radius: 15px;
+  box-shadow: 0 6px 24px #d0d7eacc;
+  max-width: 340px;
+  width: 90vw;
+  margin: 1.4em auto 0 auto;
+  text-align: center;
+}
+
+.btn-group {
+  margin-bottom: 1em;
+  display: flex;
+  justify-content: center;
+  gap: 1em;
+}
+
+.rps-btn {
+  background: #f1f4ff;
+  border: 2px solid #dbeafe;
+  border-radius: 8px;
+  padding: 0.7em 1.5em;
+  font-size: 1.08em;
+  color: #2252ba;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  box-shadow: 0 1px 3px #eee;
+}
+
+.rps-btn:hover,
+.rps-btn:focus {
+  background: #e0eaff;
+  border-color: #7da9f2;
+  color: #2744ae;
+  outline: none;
+}
+
+#display-choices {
+  font-size: 1.09em;
+  margin-bottom: 0.7em;
+  color: #395e9d;
+  min-height: 1.4em;
+}
+
+#result {
+  font-weight: 600;
+  font-size: 1.18em;
+  min-height: 2em;
+  margin-bottom: 0.5em;
+}
+
+#scoreboard {
+  font-size: 1.24em;
+  font-weight: 500;
+  margin: 1em 0 1em 0;
+  color: #1a851a;
+  letter-spacing: 1.5px;
+}
+
+#restart-btn {
+  background: #5078f0;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.58em 1.6em;
+  font-size: 1.09em;
+  cursor: pointer;
+  margin-top: 0.8em;
+  box-shadow: 0 1px 4px #e5e9fc;
+  transition: background 0.18s;
+  font-weight: 500;
+}
+
+#restart-btn:hover,
+#restart-btn:focus {
+  background: #2445a2;
+  outline: none;
+}
+
+@media (max-width: 480px) {
+  #rps-container {
+    padding: 1.1em 0.8em 1.4em 0.8em;
+    max-width: 96vw;
+  }
+
+  .btn-group {
+    gap: 0.5em;
+  }
+}