Added Timer to show Mole & Design Preview #day19

Author: VertikaJain

whack-a-mole-game/Web Design Preview/whack-a-mole-preview.mp4

@@ -2,15 +2,34 @@ const grid = document.querySelector(".grid");
 const mole = document.querySelectorAll(".mole");
 const score = document.getElementById("score");
 const timeLeft = document.getElementById("time-left");
+const time = document.querySelector(".time");
 
 let result = 0;
 let currentTime = timeLeft.textContent; //60
 
+// ------ EVENT LISTENERS ------
+
 window.addEventListener("DOMContentLoaded", () => {
     createGrid();
-    randomSquare();
+    let timerId = setInterval(randomSquare, 500);
+    let countdown = setInterval(() => {
+        timeLeft.textContent = --currentTime;
+        if (currentTime <= 0) {
+            time.textContent="game over!";
+            grid.removeEventListener("mouseup", whackMole);
+            clearInterval(countdown);
+            clearInterval(timerId);
+        }
+    }, 1000);
 });
 
+grid.addEventListener("mouseup", whackMole = (e) => {
+    if (e.target.classList.contains("mole")) {
+        result++;
+        score.textContent = result;
+    }
+})
+
 // ------ METHODS ------
 
 // method to create grid squares
@@ -33,9 +52,4 @@ randomSquare = () => {
     }
     let square = squares[Math.floor(Math.random() * 9)]; // adding mole image at random position on the grid
     square.classList.add("mole");
-    square.addEventListener("click", () => {
-        result++;
-        score.textContent = result;
-
-    })
 }

whack-a-mole-game/app.js

@@ -11,7 +11,7 @@
 
     <h2>whack a mole</h2>
     <h3 style="float: left">your score : <span id="score">0</span></h3>
-    <h3 style="float: right">time left : <span id="time-left">60</span></h3>
+    <h3 style="float: right" class="time">time left : <span id="time-left">60</span></h3>
     <div class="grid"></div>
 </section>    
 </body>