Self-Taught Developer Journal, Day 41: TOP DOM Manipulations and Events Practice
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-17 05:06:52

Today...

## Practice
1. **Grab the first exercise in [Wes Bos’s JavaScript30 program](https://www.youtube.com/watch?v=VuN8qwZoego&ab_channel=WesBos) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e52x5ju84ct0l7rrronh.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5dmiphxgjlwsjj75hsr.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp2fk1lftxsjjlmfbl86.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kglk1umw1zkuflc5jk1d.png)
 
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](https://www.youtube.com/watch?v=gvicrj31JOM&ab_channel=ProgrammingwithMosh) to learn more about it.

![this keyword](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wowxh5oug8qu3q93f1ja.png)
 
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](https://www.w3schools.com/tags/att_global_class.asp#:~:text=To%20specify%20multiple%20classes%2C%20separate,classes%20for%20one%20HTML%20element).


![Multiple Classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlp1cw96mcw6p0bixyuo.png)

Next is Practice #2:
2. **Watch the [Event Capture, Propagation and Bubbling video](https://www.youtube.com/watch?v=F1anRyL37lE&ab_channel=WesBos) 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](https://www.theodinproject.com/paths/foundations/courses/foundations/)