From eab0bc5f3c165da3e51d42acfc0b6219943cb1c6 Mon Sep 17 00:00:00 2001
From: Roshan Bhagtani <bhagtani.roshan2005@gmail.com>
Date: Sun, 26 Oct 2025 00:32:53 +0530
Subject: [PATCH] feat: Add reset score button to Whack A Mole

---
 03 - CSS Variables/index-START.html | 207 +++++++++++++++++++++++-----
 1 file changed, 175 insertions(+), 32 deletions(-)
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index d5fcc3a2ae..dd446878d1 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -2,51 +2,194 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Scoped CSS Variables and JS</title>
+  <title>Whack A Mole!</title>
+  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="style.css">
   <link rel="icon" href="https://fav.farm/🔥" />
 </head>
 <body>
-  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
-  <div class="controls">
-    <label for="spacing">Spacing:</label>
-    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+  <h1>Whack-a-mole! <span class="score">0</span></h1>
+  <button onClick="startGame()">Start!</button>
+  <button id="reset-score-btn">Reset Score</button>
 
-    <label for="blur">Blur:</label>
-    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
-
-    <label for="base">Base Color</label>
-    <input id="base" type="color" name="base" value="#ffc600">
+  <div class="game">
+    <div class="hole hole1">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole2">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole3">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole4">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole5">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole6">
+      <div class="mole"></div>
+    </div>
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+<style>
+  /* Basic game styles - no changes needed here */
+  html {
+    box-sizing: border-box;
+    font-size: 10px;
+    background: #ffc600;
+  }
 
-  <style>
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+  body {
+    padding: 0;
+    margin: 0;
+    font-family: 'Amatic SC', cursive;
+  }
 
-    body {
-      text-align: center;
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
+  h1 {
+    text-align: center;
+    font-size: 10rem;
+    line-height: 1;
+    margin-bottom: 0;
+  }
 
-    .controls {
-      margin-bottom: 50px;
-    }
+  .score {
+    background: rgba(255,255,255,0.2);
+    padding: 0 3rem;
+    line-height: 1;
+    border-radius: 1rem;
+  }
+
+  .game {
+    width: 600px;
+    height: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+  }
+
+  .hole {
+    flex: 1 0 33.33%;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .hole:after {
+    display: block;
+    background: url(dirt.svg) bottom center no-repeat;
+    background-size: contain;
+    content: '';
+    width: 100%;
+    height: 70px;
+    position: absolute;
+    z-index: 2;
+    bottom: -30px;
+  }
+
+  .mole {
+    background: url('mole.svg') bottom center no-repeat;
+    background-size: 60%;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    height: 100%;
+    transition: all 0.4s;
+  }
+
+  .hole.up .mole {
+    top: 0;
+  }
+
+  button {
+    margin: 10px auto;
+    display: block;
+    padding: 10px 20px;
+    font-size: 2rem;
+    background: rgba(255,255,255,0.2);
+    border: 0;
+    border-radius: 5px;
+    font-family: 'Amatic SC', cursive;
+    cursor: pointer;
+  }
 
-    input {
-      width: 100px;
+  /* 2. CSS: ADDED BASIC STYLING FOR THE RESET BUTTON */
+  #reset-score-btn {
+    margin-left: 10px;
+    padding: 5px 10px;
+    font-size: 1.5rem; /* Make it slightly smaller */
+    display: inline-block; /* Place it next to Start button */
+    vertical-align: middle; /* Align vertically with Start button */
+  }
+
+</style>
+
+<script>
+  const holes = document.querySelectorAll('.hole');
+  const scoreBoard = document.querySelector('.score');
+  const moles = document.querySelectorAll('.mole');
+  const resetScoreBtn = document.getElementById('reset-score-btn'); // 3. JS: SELECT THE NEW BUTTON
+  let lastHole;
+  let timeUp = false;
+  // 4. JS: LOAD SCORE FROM LOCALSTORAGE OR DEFAULT TO 0
+  let score = localStorage.getItem('whackAMoleScore') || 0;
+  scoreBoard.textContent = score; // Display initial score
+
+  function randomTime(min, max) {
+    return Math.round(Math.random() * (max - min) + min);
+  }
+
+  function randomHole(holes) {
+    const idx = Math.floor(Math.random() * holes.length);
+    const hole = holes[idx];
+    if (hole === lastHole) {
+      console.log('Ah nah thats the same one bud');
+      return randomHole(holes);
     }
-  </style>
+    lastHole = hole;
+    return hole;
+  }
+
+  function peep() {
+    const time = randomTime(200, 1000);
+    const hole = randomHole(holes);
+    hole.classList.add('up');
+    setTimeout(() => {
+      hole.classList.remove('up');
+      if (!timeUp) peep();
+    }, time);
+  }
+
+  function startGame() {
+    scoreBoard.textContent = score; // Ensure score is displayed correctly at start
+    timeUp = false;
+    peep();
+    setTimeout(() => timeUp = true, 10000) // Game duration 10 seconds
+  }
+
+  function bonk(e) {
+    if(!e.isTrusted) return; // cheater!
+    score++;
+    this.parentNode.classList.remove('up');
+    scoreBoard.textContent = score;
+    // 5. JS: SAVE UPDATED SCORE TO LOCALSTORAGE
+    localStorage.setItem('whackAMoleScore', score);
+  }
+
+  moles.forEach(mole => mole.addEventListener('click', bonk));
 
-  <script>
-  </script>
+  // 6. JS: ADD EVENT LISTENER FOR RESET BUTTON
+  resetScoreBtn.addEventListener('click', () => {
+    score = 0; // Reset score variable
+    scoreBoard.textContent = score; // Update display
+    localStorage.removeItem('whackAMoleScore'); // Remove score from storage
+  });
 
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
