I won't go over everything in the video, but here are a few things I learned or found interesting:
The exercise touched on data attributes in HTML They were used to associate the value of the key to the elements. To create the attribute, prefix it with "data-" plus desired attribute name. More information on data attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
When removing a class style, don't use setTimeout() because of the upkeep to change the time in multiple places. Use 'transitionend' event to listen for the end of the event. Wes used querySelectorAll() to create an array of all the key elements. Then he looped through each element and added an event listener. You cannot add an event listener to an array for a "transition end". You must explicitly assign an event listener to each item in the array.
The transitionend event returned every TransitionEvent that occurred. To end the event, he suggested picking the longest transition. In this case, the elapsed time was all the same and he went with "transform" property.
He used the this keyword, to refer to the key object when removing the class. I wasn't familiar with how the this keyword worked and ended up watching ProgrammingwithMosh's video to learn more about it.
Wes then displayed, in the console, the "playing" class being added then removed as the key is pressed. The classes "key" and "playing" were separated by a space to indicate multiple classes in HTML element.
Next is Practice #2:
Recently, I signed up for a lot of different frontend newsletters to keep up on what's going on in the community. Here are some cool articles I've been looking through: