Thinkful-Ed · RialdaRedzic · May 7, 2023 · May 7, 2023 · May 7, 2023 · May 7, 2023
diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
+<!DOCTYPE html>
 <html>
   <head>
     <link rel="stylesheet" href="./src/styles.css">
   </head>
   <body>
-    <h1></h1>
+    <h1 id="title">WHACK WHACK WHACK-A-MOLE!!!</h1>
     <div>
       <div>
-        <h2>Click start to play!</h2>
+        <h2>Click <button id="start">start</button> to play!</h2>  
       </div>
       <div>
         <h2>score: <span id="score">0</span></h2>
@@ -22,6 +23,27 @@ <h2><span id="timer">0</span> seconds left.</h2>
       <div id="hole1" class="hole">
         <div id="mole1" class="mole"></div>
       </div>
+      <div id="hole2" class="hole">
+        <div id="mole2" class="mole"></div>
+      </div>
+      <div id="hole3" class="hole">
+        <div id="mole3" class="mole"></div>
+      </div>
+      <div id="hole4" class="hole">
+        <div id="mole4" class="mole"></div>
+      </div>
+      <div id="hole5" class="hole">
+        <div id="mole5" class="mole"></div>
+      </div>
+      <div id="hole6" class="hole">
+        <div id="mole6" class="mole"></div>
+      </div>
+      <div id="hole7" class="hole">
+        <div id="mole7" class="mole"></div>
+      </div>
+      <div id="hole8" class="hole">
+        <div id="mole8" class="mole"></div>
+      </div>
       <!--TODO: Add the missing holes and moles. -->
     </div>
     <script src="./src/index.js"></script>

diff --git a/src/index.js b/src/index.js
@@ -2,14 +2,16 @@ const holes = document.querySelectorAll('.hole');
 const moles = document.querySelectorAll('.mole');
 const startButton = document.querySelector('#start');
 // TODO: Add the missing query selectors:
-const score; // Use querySelector() to get the score element
-const timerDisplay; // use querySelector() to get the timer element.
+const score = document.querySelector('#score'); // Use querySelector() to get the score element
+//Made changes to const score, added querySelector score.
+const timerDisplay = document.querySelector('#timer'); // use querySelector() to get the timer element.
+//Made changes to const timerDisplay, added querySelector timer.
 
 let time = 0;
 let timer;
 let lastHole = 0;
 let points = 0;
-let difficulty = "hard";
+let difficulty = "normal";
 
 /**
  * Generates a random integer within a range.
@@ -21,8 +23,17 @@ let difficulty = "hard";
  *
  */
 function randomInteger(min, max) {
-  // return Math.floor(Math.random() * (max - min + 1)) + min;
+  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+//ADDED THE RANDOMINTEGER FUNCTION, ALREADY IMPLEMENTED FOR ME, SELECTS RANDOM TIME THE MOLES COME OUT OF THEIR HOLES DURING THE GAME.
+
+console.log("A random integer between 0 and 10");
+console.log(randomInteger(0, 10));
+console.log("Another random integer between 0 and 10");
+console.log(randomInteger(0, 10));
+console.log("A random number between 600 and 1200");
+console.log(randomInteger(600, 1200));
+//ADDED RANDON INTETGERS
 
 /**
  * Sets the time delay given a difficulty parameter.
@@ -41,7 +52,16 @@ function randomInteger(min, max) {
  */
 function setDelay(difficulty) {
   // TODO: Write your code here.
-
+  if (difficulty === "easy") {
+    return 1500;
+    // SETTING DIFFICULTY FOR EASY
+  } if (difficulty === "normal") {
+    return 1000;
+    // SETTING DIFFICULTY FOR NORMAL
+  } if (difficulty === "hard") {
+    return randomInteger(600, 1200);
+  //SETTING DIFFICULTY FOR HARD
+  }
 }
 
 /**
@@ -60,7 +80,13 @@ function setDelay(difficulty) {
  */
 function chooseHole(holes) {
   // TODO: Write your code here.
-
+  const index = randomInteger(0,8);
+  const hole = holes[index];
+  if (hole === lastHole) {
+    return chooseHole(holes);
+  }
+    lastHole = hole;
+  return hole; 
 }
 
 /**
@@ -85,7 +111,13 @@ function chooseHole(holes) {
 */
 function gameOver() {
   // TODO: Write your code here
-
+  if (time > 0){
+    let timeoutId = showUp();
+    return timeoutId;
+  } else {
+    let gameStopped = stopGame();
+    return gameStopped;
+  }
 }
 
 /**
@@ -98,8 +130,8 @@ function gameOver() {
 *
 */
 function showUp() {
-  let delay = 0; // TODO: Update so that it uses setDelay()
-  const hole = 0;  // TODO: Update so that it use chooseHole()
+  let delay = setDelay(difficulty); // TODO: Update so that it uses setDelay()
+  const hole = chooseHole(holes);  // TODO: Update so that it use chooseHole()
   return showAndHide(hole, delay);
 }
 
@@ -113,12 +145,12 @@ function showUp() {
 */
 function showAndHide(hole, delay){
   // TODO: call the toggleVisibility function so that it adds the 'show' class.
-
+  toggleVisibility(hole);
   const timeoutID = setTimeout(() => {
     // TODO: call the toggleVisibility function so that it removes the 'show' class when the timer times out.
-
+    toggleVisibility(hole);
     gameOver();
-  }, 0); // TODO: change the setTimeout delay to the one provided as a parameter
+  }, 1000); // TODO: change the setTimeout delay to the one provided as a parameter
   return timeoutID;
 }
 
@@ -130,7 +162,7 @@ function showAndHide(hole, delay){
 */
 function toggleVisibility(hole){
   // TODO: add hole.classList.toggle so that it adds or removes the 'show' class.
-
+  hole.classList.toggle('show');
   return hole;
 }
 
@@ -146,7 +178,8 @@ function toggleVisibility(hole){
 */
 function updateScore() {
   // TODO: Write your code here
-
+  points++;
+  score.textContent = points;
   return points;
 }
 
@@ -159,8 +192,8 @@ function updateScore() {
 */
 function clearScore() {
   // TODO: Write your code here
-  // points = 0;
-  // score.textContent = points;
+  points = 0;
+  score.textContent = points;
   return points;
 }
 
@@ -172,7 +205,10 @@ function clearScore() {
 function updateTimer() {
   // TODO: Write your code here.
   // hint: this code is provided to you in the instructions.
-
+  if (time > 0) {
+    time -= 1;
+    timerDisplay.textContent = time;
+  }
   return time;
 }
 
@@ -184,7 +220,7 @@ function updateTimer() {
 */
 function startTimer() {
   // TODO: Write your code here
-  // timer = setInterval(updateTimer, 1000);
+  setInterval(updateTimer, 1000);
   return timer;
 }
 
@@ -197,8 +233,8 @@ function startTimer() {
 *
 */
 function whack(event) {
-  // TODO: Write your code here.
-  // call updateScore()
+  // TODO: Write your code here
+  updateScore();
   return points;
 }
 
@@ -209,7 +245,8 @@ function whack(event) {
 */
 function setEventListeners(){
   // TODO: Write your code here
-
+  moles.forEach(
+    mole => mole.addEventListener('click', whack));
   return moles;
 }
 
@@ -243,8 +280,13 @@ function stopGame(){
 *
 */
 function startGame(){
-  //setDuration(10);
-  //showUp();
+  showUp();
+  points = 0;
+  clearScore();
+  setDuration(30);
+  startTimer();
+  setEventListeners();
+
   return "game started";
 }
 

diff --git a/src/styles.css b/src/styles.css
@@ -12,26 +12,35 @@ html {
 
 h1 {
   text-align: center;
-  font-size: 90px;
-  font-family: "Comic Sans MS", "Comic Sans", cursive;
-  color: white;
+  font-size: 100px;
+  font-family: "arial", "Comic Sans MS", "Comic Sans", cursive;
+  color: Blue;
   -webkit-text-stroke: 2px black;
 }
 
 h2 {
   text-align: center;
-  font-size: 40px;
-  color: white;
+  font-size: 50px;
+  font-family: Times, Times New Roman, serif;
+  color: cornsilk;
   -webkit-text-stroke: 1px black;
 }
 
 #start {
     text-align: center;
-    font-size: 30px;
+    font-size: 40px;
+}
+
+.button {
+  align-items: center;
+}
+
+#score {
+  color: green;
 }
 
 #timer{
-    color: white;
+    color: red;
 }
 
 .grid {