DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on

Self-Taught Developer Journal, Day 41: TOP DOM Manipulations and Events Practice

Today...

Practice

  1. Grab the first exercise in Wes Bos’s JavaScript30 program by cloning the repo at https://github.com/wesbos/JavaScript30. Code along with the Video Tutorial to build the rest of the exercise.

The first exercise in Wes Bos's JavaScript is to make a JavaScript Drum Kit in Vanilla JS.

JS Drum Kit

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

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.

Transition End

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.

Transition End Events

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.

this keyword

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.

Multiple Classes

Next is Practice #2:

  1. Watch the Event Capture, Propagation and Bubbling video from Wes Bos’s JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.

Frontend Newsletter Articles

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:

Frontend Focus
https://www.iamdeveloper.com/posts/frontend-developer-resources-2022-4cp2/
CSS Weekly
https://www.aleksandrhovhannisyan.com/blog/writing-better-css/?utm_source=CSS-Weekly&utm_campaign=Issue-488&utm_medium=email

Resources

The Odin Project

Discussion (2)

Collapse
trandainien profile image
Nie

thanks for sharing.

Collapse
jennifer_tieu profile image
Jennifer Tieu Author

No problem! Thank you for reading!:)