JavaScript30 — Day 11, Pt. 2
Continuing to work through building a custom HTML video player with controls like play/pause, volume range, video speed, and skip buttons.
Today I picked back up where I left off yesterday with the custom video player!
Bits
- If you use an event listener to call a function on an element, you can then use “this” to refer to the element within the function body. I created a little JSBin exercise to confirm that “this” is true, hehehe…
- In writing the scrub function, we initially passed “e” as a parameter, and console logged the event to learn more about it. The function was connected to an event listener, so when we clicked on the progress bar, we got a mouse event message in the console. One of the properties of this mouse event was “offsetX”, which told us how far into the progress bar we had clicked… I think! Then, we used offsetX as part of the equation to determine the percentage to update the video play when the progress bar was manually adjusted. I can’t 100% elucidate how this works, but more so my revelation is about all of the information you can glean when you console.log an event!
Blindspots
- I cannot seem to get the console to log the handleRangeUpdate function — even when I connect the solution JS script, nothing logs to the console. The slider bar simply turns green. (FIVE MINUTES LATER) It was a simple typo in hooking up my HTML — instead of selecting the class of ‘.player__slider’, I had only used one underscore: ‘.player_slider’. Wow. Most of the time something is amiss, it’s a little silly typo like that. You’ve gotta know how to comb.
- All of the properties you can add to an input tag in HTML. It seems like you can control the volume range just through the input tag. How?
Breakdown
I’ve spent the last half hour or so looking into passing “e” as a function parameter. What I can glean is that you pass “e” as a parameter when your function relies on grabbing some of the information from the event itself. For instance, in today’s project, we passed “e” as a parameter for the scrub function, because in order for the function to work, we needed the “offsetX” information generated by the event. I learned that an event is an object, and when you console.log an event, what you’re seeing when you expand the mouse event dropdown menu is a long list of properties attached to that event object. I’m still a bit muddy on the syntax of this, however — a little confused about how why, sometimes, what’s passed in a function’s parentheses is a “parameter”, while other times it’s an “argument”. When passing “e” to a function, why do we not treat it like a variable, able to be changed when we fire the function it’s passed to?
This was a big, long, complex JS project for me! Yesterday, I was feeling nervous about having worked on JS for about 6 weeks now, and still needing a ton of support to get through projects- so I Googled “how long does it take to learn JavaScript?” Here’s the answer that helped get my mind right:
Just in case you’re in the same, or a similar, boat. I see you. :)
