This is a solution to the JS Drumkit tutorial by Wes Bos as part of TheOdinProject JavaScript Course.
This is a single-page website which simulates a drum kit via JS. You can click the buttons on your keyboard or with your mouse to produce various drum sounds.
- Live Site URL: https://drumkit-snowy.vercel.app/
Step 1:
I watched the introduction to the tutorial and then proceeded to build the page myself.
Step 2:
I watched the tutorial and refactored my code with the new knowledge I acquired.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla Javascript
CSS:
- Make inset shadows
- Basics of grid
JavaScript:
- DOM Manipulation
- Event Listeners - overall
- Bubbling, Propagation
- EventListeners "options" parameter - more specifically {once:true}
- Creating and utilizing custom html attributes with "data-"
- Playing audio with the Audio class
- Working with buttons - keystrokes and clicks.
- Get more comfortable with Grid and Flexbox.
- Learn to create modern page layouts
- Petar Petrov
- Twitter - @petarchou