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.

JavaScript 30- Day 20 Study Notes

JavaScript 30–01 Drum Kit