wesbos#30

brandonjunus · brandonjunus · commit a27e5ff353b0 · 2019-01-15T19:44:46.000-08:00
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
@@ -9,6 +9,7 @@
 <body>
 
   <h1>Whack-a-mole! <span class="score">0</span></h1>
+  <h1>Timer:<span class="timer"></span></h1>
   <button onClick="startGame()">Start!</button>
 
   <div class="game">
@@ -36,6 +37,56 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   const holes = document.querySelectorAll('.hole');
   const scoreBoard = document.querySelector('.score');
   const moles = document.querySelectorAll('.mole');
+  const timer = document.querySelector('.timer');
+  let currPeep;
+
+  moles.forEach(mole => {
+    mole.addEventListener('click', () => {
+      if (mole.dataset.recentlyClicked === "true") {
+        return
+      }
+      mole.dataset.recentlyClicked = true;
+      mole.parentNode.classList.remove('up');
+      scoreBoard.innerHTML = Number(scoreBoard.innerHTML) + 1;
+      setTimeout(() => {
+        mole.dataset.recentlyClicked = false;
+      }, 400);
+    })
+  });
+
+  const startGame = () => {
+    peep(getRandomHole());
+    startTimer(10);
+  }
+  
+  const startTimer = (seconds) => {
+    timer.innerHTML = seconds;
+    let countdown = setInterval(() => {
+      seconds -= 1;
+      timer.innerHTML = seconds;
+      if (seconds <= 0) {
+        holes.forEach(hole => {
+          hole.classList.remove('up');
+        })
+        clearTimeout(currPeep);
+        clearInterval(countdown);
+      }
+    }, 1000)
+  }
+
+  const getRandomHole = () => {
+    return Math.floor(Math.random() * 6) + 1
+  };
+  
+
+  const peep = (randomNumber) => {
+    let currHole = document.querySelector(`.hole${randomNumber}`);
+    currHole.classList.add('up');
+    currPeep = setTimeout(() => {
+      currHole.classList.remove('up');
+      peep(getRandomHole())
+    }, Math.floor(Math.random() * 1250) + 500);
+  }
 
 </script>
 </body>
