EdwardRutz / drum-kit

JavaScript Drum Kit

Turn a keyboard into a drum machine

• Pressing a key plays a drum noise and shows a key animation.

Install & Run

Notes

• Find keyboard key codes easily, Key Code Info
• Viewport = browser window size
• HTML Data-* Attributes data-key "The data-* attributes is used to store custom data private to the page or application."
• KeyboardEvent.keyCode, e.keyCode is depreciated, KeyboardEvent.keyCode

Sources

• From Wes Bos: JavaScript30

• Viewport Meta Tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
• The X-UA-Compatible tag is not needed unless dealing with older versions of IE, <meta http-equiv="X-UA-Compatible" content="ie=edge">
• Using the X-UA-Compatible tag
• HTML Keyboard <kbd> Tag
• CSS Units, Relative Length, Viewport, vh
• CSS flex Property
• CSS display: flex Property
• CSS Transistions
• HTML DOM addEventListener() Method
• JavaScript HTML DOM EventListener
• Keyboard Event keyCode Property