Day28 of #100DaysOfCode

#CodeTogether Day 28/100

Hii folks 🙌

Today I have completed the 28th video of JavaScript30!

Project 28: Video Speed Controller UI

Source: https://javascript30.com

Learnings:

Today we have been tasked to make 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 = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

The event listener detected mouse movement on the speed bar.

function handleMove(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) + '%';
      const playbackRate = percent * (max - min) + min;
      bar.style.height = height;
      bar.textContent = playbackRate.toFixed(2) + '×';
      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.

Then we linked that function as the event listener with the mouse movement.

speed.addEventListener('mousemove', handleMove);

Today I Learned (T-I-L):

• MouseEvent.pageY, Element.offsetTop, & Element.offsetHeight
• Tracking the mouse with a bit of math! ⚡️

That is all for Day28 ✅

Thanks for reading, See you tomorrow!