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…


https://javascript30.com/

Day 29 of JavaScript 30 by Wes Bos involved making a countdown timer with some interesting features. A display below the timer shows what time it will be when the timer runs out. A menu at the top of the page contained several selections to set the timer, as well as an input area to select a unique time.

At the top of the script tag, we named four variables and selected respective classes for display, end time, and buttons.

let countdown;const timerDisplay = document.querySelector('.display__time-left');const endTime = document.querySelector('.display__end-time');const buttons = document.querySelectorAll('[data-time]');

The timer function designated start and…


https://javascript30.com/

Day 28 of JavaScript 30 by Wes Bos consisted of making a video speed controller where the user can change the playback speed using a scrub bar.

We started by selecting the speed, speed-bar, and video classes.

const speed = document.querySelector('.speed');const bar = document.querySelector('.speed-bar');const video = document.querySelector('.flex');

The event listener detected mouse movement on the speed-bar.

speed.addEventListener('mousemove', function(e) {   const y = e.pageY - this.offsetTop;   const percent = y / this.offsetHeight;   const min = 0.4;   const max = 4;   const height = Math.round(percent * 100) + '%';// adjust to height of bar   const playbackRate…

https://javascript30.com/

Day 27 of JavaScript 30 by Wes Bos involved setting up a click and drag feature to scroll through multiple divs horizontally across the viewport.

The HTML and CSS made a series of 23 divs as a slider. The divs will transform slightly when clicked on for a nice effect.

We set up several variables.

const slider = document.querySelector('.items');let isDown = false;let startX;let scrollLeft;

Next, we added event listeners with functions. Mousedown activated the slider.

slider.addEventListener('mousedown', (e) => {  isDown = true;  slider.classList.add('active');  startX = e.pageX - slider.offsetLeft;  scrollLeft = slider.scrollLeft;});

MouseLeave turned the slider off.


https://javascript30.com/

Day 26 of JavaScript 30 by Wes Bos involved setting up a dropdown element that followed along a navigation bar. The element was customized for each item in the menu.

We set up three list items inside an unordered list that made up the navigation bar. They included a dropdown CSS class that contained properties for opacity and display. A new CSS property, to me, is the will-change property that hints to the browser to expect an element change later on.

.dropdown {  opacity: 0;  will-change: opacity;  display: none;

Bos added two sub-classes that will provide the change.

.trigger-enter .dropdown…

https://javascript30.com/

Day 25 of JavaScript 30 by Wes Bos worked on event listener concepts and introduced “once”.

We started with three nested divs, selected them, and console logged the event.

const divs = document.querySelectorAll('div');function logText(e){   console.log(this.classList.value);
}

If you click on the innermost div, all three divs will log a click event. This is because of “bubbling” where the click event will ripple up through the entire document including each nested div.

The event “capture” by the browser, starts from the outermost container and captures the event working inward to the innermost container. …


https://javascript30.com/

Day 24 of JavaScript 30 by Wes Bos consisted of making a navigation bar sticking to the top of the page as a user scrolled down the web page. Also, a logo area will slide in from the top-left corner when the scrolling started.

There was a header with a featured image and an H1 heading sitting above the navbar, so the initial scrolling had to account for this space.

const topOfNav = nav.offsetTop;function fixNav(){   if(window.scrollY >= topOfNav) {      document.body.style.paddingTop = nav.offsetHeight + 'px';      document.body.classList.add('fixed-nav');   }else {      document.body.style.paddingTop = 0;      document.body.classList.remove('fixed-nav');   }}

The window.scrollY value accounts for the…


https://javascript30.com/

Day 23 of JavaScript 30 by Wes Bos involved making a speech synthesis app that converts a written text to digital voice. The program used the speech synthesis API that resides in most modern browsers. The app contained two input sliders to manipulate speech rate and pitch.

First, we declared a new variable containing the message, and an empty array to contain various digital voices from the API.

const msg = new SpeechSynthesisUtterance();let voices = [];

We selected the necessary HTML elements including the text box value (The written message) placing in an array.

const voicesDropdown = document.querySelector('[name="voice"]');const…

https://javascript30.com/

Day 22 of JavaScript 30 by Wes Bos involved setting up a cool feature to use on a navigation bar. As you moved the mouse across the bar, the tabs will highlight. The size of the highlight changes to fit the wording as the mouse moves to a different tab.

Bos created two variables. One to select the HTML tab. The other to add the highlight.

const triggers = document.querySelectorAll('a');const highlight = document.createElement('span');highlight.classList.add('highlight');document.body.append(highlight);

A function obtained the bounding coordinates and matched them up with the target to be highlighted.

function highlightLink() {   const linkCoords = this.getBoundingClientRect();

https://javascript30.com/

Day 21 of JavaScript 30 by Wes Bos used an app called x-code to create a geolocation app. The x-code app is exclusive to the Mac ecosystem and since I use Windows, I had to sit this one out. I followed along with the coding, but could not build out the app.

Bos set two variables to access the HTML elements.

const arrow = document.querySelector('.arrow');const speed = document.querySelector('.speed-value');

And used one function to process the information and change the display accordingly.

navigator.geolocation.watchPosition((data)=> {   speed.textContent = data.coords.speed;   arrow.style.transform = `rotate(${data.coords.heading}deg)`}, (err)=> {      console.err(err);

Jeffrey Amen

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