acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/README.md b/Domains/Frontend/MiniProjects/Whack_a_Mole/README.md
@@ -0,0 +1,12 @@
+**Contributor:** jeturgavli
+
+## Description
+**Whack-a-Mole** is a fun and interactive browser game where the player’s goal is to **click on randomly appearing moles 🐹 to increase their score.** The game features **9 holes**, and moles pop up in random positions. Each successful click adds to the score, and the game runs on a **30-second timer.**
+
+## Tech Stack
+- HTML
+- CSS
+- JavaScript
+
+## How to Run
+1. Open the `index.html` file in your web browser.
diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/index.html b/Domains/Frontend/MiniProjects/Whack_a_Mole/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Whack-a-Mole 🐹</title>
+  <link rel="icon" type="image/png" href="https://emojiapi.dev/api/v1/hamster/128.png">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>🐹 Whack-a-Mole!</h1>
+  <div class="info">
+    <span>Score: <b id="score">0</b></span>
+    <span>Time: <b id="time">30</b>s</span>
+  </div>
+
+  <div class="game-grid" id="grid"></div>
+
+  <button id="startBtn">Start Game</button>
+
+   <footer>
+    <p>Project by – <strong>jeturgavli</strong></p>
+  </footer>
+
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/script.js b/Domains/Frontend/MiniProjects/Whack_a_Mole/script.js
@@ -0,0 +1,69 @@
+const grid = document.getElementById("grid");
+const scoreEl = document.getElementById("score");
+const timeEl = document.getElementById("time");
+const startBtn = document.getElementById("startBtn");
+
+let score = 0;
+let timeLeft = 30;
+let timerInterval;
+let moleTimer;
+
+function createGrid() {
+  for (let i = 0; i < 9; i++) {
+    const hole = document.createElement("div");
+    hole.classList.add("hole");
+
+    const mole = document.createElement("div");
+    mole.classList.add("mole");
+    mole.textContent = "🐹"; // emoji mole 🐹
+
+    // 🖱 Single click event only
+    mole.addEventListener("click", () => {
+      if (mole.classList.contains("up")) {
+        score++;
+        scoreEl.textContent = score;
+        mole.classList.remove("up");
+      }
+    });
+
+    hole.appendChild(mole);
+    grid.appendChild(hole);
+  }
+}
+
+function randomMole() {
+  const moles = document.querySelectorAll(".mole");
+  moles.forEach(m => m.classList.remove("up"));
+
+  const randomIndex = Math.floor(Math.random() * moles.length);
+  moles[randomIndex].classList.add("up");
+
+  // hide mole after 700ms
+  setTimeout(() => moles[randomIndex].classList.remove("up"), 700);
+}
+
+function startGame() {
+  score = 0;
+  timeLeft = 30;
+  scoreEl.textContent = score;
+  timeEl.textContent = timeLeft;
+
+  clearInterval(timerInterval);
+  clearInterval(moleTimer);
+
+  moleTimer = setInterval(randomMole, 800);
+  timerInterval = setInterval(() => {
+    timeLeft--;
+    timeEl.textContent = timeLeft;
+    if (timeLeft <= 0) endGame();
+  }, 1000);
+}
+
+function endGame() {
+  clearInterval(timerInterval);
+  clearInterval(moleTimer);
+  alert(`⏰ Time's up! Your score: ${score}`);
+}
+
+createGrid();
+startBtn.addEventListener("click", startGame);
diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/style.css b/Domains/Frontend/MiniProjects/Whack_a_Mole/style.css
@@ -0,0 +1,77 @@
+body {
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+  background: linear-gradient(135deg, #a8edea, #fed6e3);
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+
+.info {
+  display: flex;
+  justify-content: space-around;
+  width: 250px;
+  margin-bottom: 15px;
+  font-size: 18px;
+}
+
+.game-grid {
+  width: 300px;
+  height: 300px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+.hole {
+  background: #3e2723;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.mole {
+  position: absolute;
+  font-size: 40px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;     /* Vertical center */
+  justify-content: center; /* Horizontal center */
+  bottom: -100%;           /* Hidden position */
+  transition: bottom 0.25s;
+}
+
+.mole.up {
+  bottom: 0; /* Pop up in center */
+}
+
+#startBtn {
+  margin-top: 20px;
+  padding: 10px 25px;
+  border: none;
+  border-radius: 10px;
+  background: #2a9d8f;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+#startBtn:hover {
+  background: #21867a;
+}
+
+footer {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #333;
+  opacity: 0.8;
+}