Drum Kit with Vanilla JS

Aditi Sneh
1 min readJan 29, 2021

--

Prerequisites: HTML CSS js(basic)

hosted static website with github pages

This project is a part of Javascript30 i.e 30 days with js. Follow a the given link to work on the amazing course!

Day 01 video covers only the js part. So you need to have HTML CSS part framed earlier. Thinking how would you do that all alone. NO worries guys! This site has got a stater file section , a zip file containing a 30 day package.

Anyways, the key elements that you will learn through this project :

  1. How the key events work on js i.e event listener part.
  2. How can we do frequent sound effect with continue key press.
  3. About the audio tag.
  4. About the ASCII value of keys.
  5. Animation effect to buttons.

I made this site as a part of 30 days js challenge. Guys it’s really fun exploring vanilla js. Don’t think much, it takes hardly half-an-hour for a beginner to complete such thing. Take this challenge , have fun!

And most important : If I can , You can as well!

Checkout what would your project look like:

https://aditisneh.github.io/DrumKit/

--

--

Aditi Sneh

Engineering at Microsoft, here to share my experiences and learning. Exploring spirituality and fitness.