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.

Retired physician, writer, aspiring website designer and developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store