FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[Original HTTPS Page]
JavaScript30/01-JavaScript-Drum-Kit at main · sagarmittal1/JavaScript30 · GitHub
sagarmittal1
/
JavaScript30
Public
Notifications
You must be signed in to change notification settings
Fork
1
Star
7
Code
Issues
0
Pull requests
0
Discussions
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Issues
Pull requests
Discussions
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
JavaScript30
/
01-JavaScript-Drum-Kit
/
Copy path
Directory actions
More options
More options
Directory actions
More options
More options
Latest commit
History
History
History
Breadcrumbs
JavaScript30
/
01-JavaScript-Drum-Kit
/
Copy path
Folders and files
Name
Name
Last commit message
Last commit date
parent directory
..
images
images
sounds
sounds
README.md
README.md
index.html
index.html
main.js
main.js
style.css
style.css
README.md
Outline
1- JavaScript Drum Kit
Things I learned
Use of <kbd> HTML tag.
What are keycodes & how to use them.
data-* attributes where * can be anything specified. They are like to store custom data on HTML itself
Use of rem for making some responsive & easier working in CSS. I knew but started using now.
Use of attributes in giving class property in querySelector
Some important things -
Whenever we play to play sound then we add playing class in HTML code then the transition effect happened there.
After the transition is done we remove by transionend property.
We use keydown event not keyup event as when the user want to press multiple times then it will not work as stated.
We can play audio in JavaScript by just using .play().
We use
window
in JavaScript to capture key that are preseed not document.
audio.currentTime = 0 for rewinding sound. Use to prevent delaying sound. this is pretty important.
Back
|
FazBrowse Home
|
New Git URL