Assalam-o-Alaikum, hope you all are doing good! Ramzan is going on, everyone is busy in their lives and ibadah, my university vacations are also going on! I always want to spend my time doing productive things, so I am learning React these days! React is a JS library for making SPA web apps.

Project Description

I will use CodePen in this tutorial as coding environment, its a very useful tool for coding, specially for web development. I am doing a course on freecodecamp these days and I have been given these projects to be done for certification. So moving on to the project, it was a drum machine that produced drum sounds when buttons are pressed or clicked, but as I like piano as an instrument, I decided to tweak the project and made a very simple but cute looking piano app to share with my friends and steemians!

Step by step walk-through

Here is a glimpse of code that we will cover today!

First of all we imported sounds from the internet and map those sounds to some keys that will act as buttons to trigger those sounds and name to be displayed when they are played!

Then I designed how each key should work as a drumpad and what sounds it play!

After that I used all the keys together to design a drumset of different keys of piano!
Then I rendered those keys as a drumset in my application!

I also designed a display component that will display the name of the key currently tapped!
Then after designing individual components I mapped all those components in a single element and attached them to the main DOM using ReactDOM functions.

Here are some styles that I later added to make the app look better!

Final Application

You guys can also visit the piano player and have some fun playing it Piano Player

Conclusion

I hope now you all liked my project, let me know if you would like to see more!

Regards, @faizan2sheikh

Thanks to the mods and @siz-official for serving the community!

Thank you for reading my post!