JavaScript 30 Day 1 – Drumkit- Project Reflections

To practice putting together HTML/CSS/JavaScript functionalities, I have decided to dig into the daily project ideas offered by an educational platform called JavaScript 30 or https://javascript30.com/.

Day 1 – JavaScript Drumkit

What I learned:

1. Data attributes in HTML
2. That you can transform (scale) and create transitions over a given length of time within CSS!
3. Refresher on using event listeners and an introduction to the event listener “keydown” and “transitionend”
4. How to preview code on Sublime text editor by installing a package and using the hot keys conrol + alt + v to pop up the browser. Needing to get more clear on how to use text editors and settling on one favorite… Have been conflicted about Atom/VS Code/Sublime for a few days now…
5. Learned about audio.play() being a built-in vanilla JS function. Looking forward to learning more about audio…
6. Adding event listeners to an entire class of elements, in this case all keys had event listeners attached and were selected using querySelectorAll(“.key”)

//example of one div from the keyboard trigger for the "boom" sound. the data-key"71" references the number that is innately assigned to the G key. All keyboard keys have numbers assigned naturally which can be seen by logging the key presses to the console. The class "sound" is only used in the CSS file. 
<div data-key="71" class="key">
  <kbd>G</kbd>
  <span class="sound">boom</span>
</div>



<script>

function removeTransition(e){
  if(e.propertyName !== "transform") return; // skips the other property names that aren't transform
  this.classList.remove('playing');
}

function playSound(e){
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);           // This was an interesting moment of syntactical chaos to me that I still need to organize my thoughts around. Like, how and when do I use the $ ?
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  audio.currentTime= 0;                                                         //I thought this was a great reminder of how to use DOM methods. Grabbing an element with querySelector,                   
  if(!audio) return;                                                        // assigning it to variable then using dot notation to apply DOM methods to the variable. There are so               
  audio.play();                                                           //many methods I have not heard of or even imagined would exist! Like, play(). Nice.                                                                      
  key.classList.add('playing');
}

const keys = document.querySelectorAll(".key");
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);

</script>