Day01 of #100DaysOfCode

#BuildTogether Day 01/100

Hii folks 🙌

I have started #100DaysOfCode and today is Day01.

I will be documenting my everyday update here and sharing it with you all!

Project 01: JavaScript Drum Kit

Source: https://javascript30.com

Learnings:

• Today, I am tasked with building: a drum kit.
• Right from the jump, I was given the HTML, CSS, and audio clips to work with, so at least that was settled — the real problem was with connecting it all, so I followed through with the exercises.

The background is mine!

Next up, we listen to the window with an event listener called addEventListener for the key down event. When the key down event happens, a function is run. The code between the script tags now looks like this

window.addEventListener(‘keydown’, function(e){
if(!audio) return;
audio.play();
const audio = document.querySelector(‘audio’)
});

Next up is to write up on animation to make the keys brighten up and this is done with these lines of code:

const key = document.querySelector(`.key[datakey=‘‘${e.keyCode}’’]`);

Now the code between the script tag now looks like this:

window.addEventListener(‘keydown’, function(e){
const audio = 
document.querySelector(‘audio[data-key=${e.keyCode}']’);
const key = document.querySelector(‘.key[data-key=${e.keyCode}']’);
if(!audio) return;
audio.currentTime = 0;
audio.play();
console.log(key);
});

Here Template literals are literals delimited with backticks ( ` ), allowing embedded expressions to substitute.

Next addition to the code block are these lines of code:

function removeTransition(e) {
console.log(e)
}const keys = document.querySelectorAll('.key;);
keys.forEach(key => key.addEventListener('transitionEnd', removeTransition));

The transitionend event is fired when a CSS transition has been completed. In this case where a transition is removed before completion. the code says is, every key is listened to for a transitionEnd, then when it is completed, removeTransition gets into place.

Finally, we have this code block:

function removeTransition(e) {
if(e.propertyName !== 'transform') return;
this.classList.remove('playing');}

T.I.L. (Today I Learned)

• about transitionEnd
• Template Literals
• playing audio files in JavaScript
• the difference between addEventListener and onClick
• Also, solved one DSA problem

In addition to the above, I’m also building my own youtube clone app name PocketTube with Python Django AND ReactJS!!
API is in progress! 🎉

That is all for Day01 ✅

Thanks for reading, See you tomorrow!