This content originally appeared on DEV Community and was authored by Yaman Sharma
This is the first post of the Learnings from Javascript30 Series where we will be covering what we learned from each day of Javascript30, a series by Wesbos.
In the first lesson of Javascript30, We build a drum kit where user can create their own tunes by clicking alphabetic keys. Get the full Source Code here on my Github Repo.
The learnings from the project :-
1. Data-Key Attributes:
data-* attributes allows us to store extra information on html elements. So, if there's a attribute on an HTML element which starts with data- , it's called a data-attribute.
e.g. data-key=65 is a data-attribute for the below element
We can get the value of data attribute by using getAttribute() or can read/write using dataset property.
2. Audio Element:
The audio element is used to add audio content in html pages.
It can take multiple attributes but the most common and necessary one is the src attribute.
We can even provide multiple source attributes so that if first one doesn't load, it can fall back to the others.
Various methods associated with audio are play(), pause() etc and properties like muted, loop, currentTime etc which gives us more control over the audio element.
3. TransitionEnd Event
The transitionend event is fired when a CSS transition is completed.
In our project, we wanted to remove the styling of the key once the css transform transition has ended. Hence we added the event listener on all the keys and checks if transform has occured. If yes, remove the styling.
There are many other events like transitionstart, tranistioncancel etc which can be useful while working with animations.
Javascript30 is a great learning series for a novice as well as an experienced developer because you will be learning a lot of stuffs which is either not known to you or can be helpful to fill the learning gaps.
Hope you liked the post and learned something along the way! ?
✋ Hey! Before you go ?
If you enjoyed this article, You can also follow me on
LinkedIN | Dev.to | Github | Twitter
In the next blog, we will cover the learnings from second day of Javascript30, so stay tuned! ✨
This content originally appeared on DEV Community and was authored by Yaman Sharma
Yaman Sharma | Sciencx (2021-07-17T18:18:30+00:00) Learnings from Javascript 30 – Building a JS Drum Kit. Retrieved from https://www.scien.cx/2021/07/17/learnings-from-javascript-30-building-a-js-drum-kit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.