JavaScript 30- Day 28 Study Notes

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 = percent * (max-min) + min;   bar.style.height = height;// 2 decimals in number   bar.textContent = playbackRate.toFixed(2) + 'x';   video.playbackRate = playbackRate;});

Within the function, we first found the position of the mouse on the bar by percentage. Then we linked the playback rate to the position. Finally, we calculated and displayed a value representing the speed.

Again, we worked with offset position methods. To be noted, playbackRate was both a variable and a method attached to the video object.

Follow my study notes as I progress through JavaScript 30.

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