JavaScript 30- Day 30 Study Notes

https://javascript30.com/

Day 30 of JavaScript 30 by Wes Bos finished a great course off with making a Whack-A-Mole game. There wasn’t much new material in this lesson, instead, it solidified what we have learned. And it was fun playing the game after I finished!

We started by selecting classes and naming variables.

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;

We wanted to randomize the time each mole stuck its head out.

function randomTime(min, max) {
   return Math.round(Math.random() * (max - min)+ min);
}

And randomize which hole the mole stuck its head out of.

function randomHole(holes){
   const idx = Math.floor(Math.random() * holes.length);
   const hole = holes[idx];
   if(hole === lastHole){
      return randomHole(holes);
   }
   lastHole = hole;
   return hole;
}

Get the mole SVG image to peep out of the hole by toggling a CSS class and linking it to the random hole and time.

function peep(){
   const time = randomTime(200,1000);
   const hole = randomHole(holes);
   hole.classList.add('up');
   setTimeout(() => {
      hole.classList.remove('up');
      if(!timeUp) peep();
   }, time);
}

A function to re-set the game.

function startGame() {
   scoreBoard.textContent = 0;
   timeUp = false;
   score = 0;
   peep();
   setTimeout(() => timeUp = true, 10000);
}

Finally setting up an event listener and function to score when the user clicked on the mole.

function bonk(e) {
   if(!e.isTrusted) return; //cheater!
   score++;
   this.classList.remove('up');
   scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));

This was a great lesson to end the course with. I feel I can code a program like this all by myself.

I didn’t quite do one lesson per day. It took me 6 weeks to complete the course. I never did more than one lesson a day and did the last 12 lessons on consecutive days.

For me, JavaScript 30 was just what I needed as a beginning programmer. I had just finished slogging through two long tutorials on JavaScript and advanced CSS. While these courses introduced me to many new concepts, I wasn’t sure how everything fit together to actually make something. Wes Bos explained how all the parts fit together in a clear, concise manner. He also has a fun, light-hearted style that I appreciated. And Bos offers this course for FREE, no strings attached. For people just finishing didactic tutorials in web development, I highly recommend JavaScript 30 as the next step.

To follow my blog through this course from the beginning.

JavaScript 30–01 Drum Kit