Yesterday I committed myself to the #100DaysOfCode challenge. First, a little background about myself: I have a bachelor's degree in Economic Informatics and I recently finished a Full Stack Web Development Bootcamp in Berlin. My past work has been mainly in arts as a 3D Motion Designer. 🎨

I'm taking on this challenge because I want to land my first job (hey employers!) and I will also build my portfolio in the process. The way that I will approach this challenge is a bit different. Instead of just coding for one hour every day I am challenging myself to also build something, be it a small website or an app and share it here. Another goal that I'm setting for myself is to share what I've learned during that day.

So let's get going! For my first day of the challenge I built a simple drum kit app, using HTML, CSS and Vanilla JavaScript. This was the first challenge from #Javascript30 series: https://javascript30.com/ The idea for my drum kit was inspired by Björk's song 'Cvalda', which she plays in the wonderful movie 'Dancer in the Dark' (watch it if you haven't!). You can try the drum kit for yourself at: https://gyuluu.github.io/drum-kit/. The way it works is you have to press one of the letters displayed on the screen and then the corresponding sound and animation fires up.

In the process of making this I've learned a few JavaScript tricks:

1. 'transitionend' event - this event occurs when a CSS transition has completed. In this case the transitioned form is removed after the transition has finished.

2. Add, remove and toggle classes on a CSS element

For example adding a class to a

document.getElementById("key").classList.add("playing");

1. Playing an audio clip with JavaScript:

First we select the audio element and then we chain the play method:

document.querySelector("audio").play();

Happy coding! 👨🏻‍💻