Skip to content

This is the fourth major project in the course The Complete 2022 Web Development Bootcamp by Dr. Angela Yu. It mimics a drumkit set, with buttons onscreen that can be activated either by clicking or pressing keys - a great way to understand and event listeners in JavaScript, and further opportunity to toy with the Document Object Model.

Notifications You must be signed in to change notification settings

akcumeh/drumkit

Repository files navigation

Drumkit Project

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.

Table of contents

Overview

The challenge

Create a mimic drumset. Employ your understanding of basic JavaScript as well as advanced DOM manipulation (event listeners).

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • JavaScript + DOM manipulation

What I learned

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() {}.

Author

Thanks for reading this far! You can view and follow my profiles:

About

This is the fourth major project in the course The Complete 2022 Web Development Bootcamp by Dr. Angela Yu. It mimics a drumkit set, with buttons onscreen that can be activated either by clicking or pressing keys - a great way to understand and event listeners in JavaScript, and further opportunity to toy with the Document Object Model.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published