Image
Top
Navigation

Product: Virtual Piano
Discipline: Web Development
Tools Used: VanillaJS

The Process

I built this virtual piano using some of the tools I learned from doing a 30-day JavaScript Challenge. The first challenge was to build a virtual drum kit using JavaScript. After finishing that project tutorial, I wanted to use those skills and build something completely different. Hence, my virtual piano was created. In the original project, users can play a sound by hitting the key on their keyboard. I wrote a new function so that the keys will also play through a click event.

You can read my blog post here on how I came about to adding the additional functions to my JavaScript. 

Final Product

After styling and writing my JavaScript, I created a virtual piano where users can play the keys either through hitting the corresponding key on their keyboard, or by clicking the keys with their cursor.

Virtual Piano