This Drum Kit project was created following Section 13 of The Complete 2022 Web Development Bootcamp by Dr. Angela Yu, available on Udemy. This is the fourth major project in the course. It mimics a drumkit set, with buttons onscreen that can be activated either by clicking or pressing keys - a great way to understand and use event listeners in JavaScript as well as further opportunity to toy with the Document Object Model.
Create a mimic drumset. Employ your understanding of basic JavaScript as well as advanced DOM manipulation (event listeners).
- Semantic HTML5 markup
- CSS custom properties
- JavaScript + DOM manipulation
I've been learning a lot in this course, and in this section where we focused on advanced JavaScript and more DOM manipulation, I learned...
- more about event listeners and the kinds of events that can trigger them.
- about JavaScript objects and constructor functions: I understood how objects can acquire both properties and methods through a constructor function.
- about higher order functions and callback functions and the relationship between them: While a higher order function is one that is able to accept another function as one of its inputs (e.g. the method
addEventListener()), a callback function is the function that is passed into a higher order one as an input (e.g.,addEventListener()takes two inputs: a string representing the event type to be listened for, and a function to be executed only after that event is detected. So any function that is passed in as the second parameter of the method is a callback function); the latter then waits for a result from the computation of the function to proceed. - a reinforced understanding of and acquired confidence with anonymous functions, which are declared with
function() {}.
Thanks for reading this far! You can view and follow my profiles: