Commit10 //#JavaScript30 - Day 1 [+who/what is twixmixy?]

Photo of stop sign in woods leaning on barbed wire fence. All header photos are either from my photography days or from my phone.

Time for a new challenge!

Last week I wrapped up my JavaScript Vanilla course with Skillcrush. I am still feeling like a majorn00b when it comes to writing JS, so I want to do some projects to help me get a better understanding.

This is where JavaScript30 comes in. Ideally I will do a mini project every day for the next 30~ days.

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Who/what is Twixmixy?

Before I jump into all of that, I thought I'd take some time to fill you in on who I am and what I'm doing here. To begin, you can learn a bit more about me by going to my personal website www.twixmixy.com or you can check out my LinkedIn profile - feel free to send me a connection request!

This journey that I am on is a bit of a return to my roots in all things tech and nerdy. I grew up in the 80s/90s in my parent's computer store. Literally, they homeschooled me and my siblings, so we were often at the computer store doing our school work.

Napster and EverQuest (this is also where my Twixmixy handle came from) are core memories from my childhood. Honestly I attribute my ability to being a self-taught learner to my early computer days of teaching myself HTML, Photoshop and playing video games.

I went on to teach myself photography, basic design, and how to build out wordpress websites. I never received anything that I would consider formal training until I enrolled in coding bootcamp in October 2022.

For the last half dozen years of my career I've been working in product and project management in software/tech. I found that I quickly adapted to any software or tool we utilized and was easily able to understand it and then teach others how to best utilize them. Currently I plan to continue working in this realm, specifically Product/Project Management in software.

I've taken a step back from work since January. Now, I understand that I have the privilege to do this. I told myself the next time I found myself in transition, I would get a career coach and make the next best decision for myself, instead of taking on whatever I could first find that paid the bills.

So that puts me here & now. I have been working with a career coach, I have someone professionally revamping my resume, I am going to therapy on a regular basis, working out multiple times a week. I also recently chartered on a competitive team with Charlotte Roller Derby.

Oh then, yes, of course, I am also attempting to power through my coding bootcamp. In my spare time from there, I volunteer with Charlotte Roller Derby, to help them with their IT needs. I volunteer with my local neighborhood precinct to get out the vote. And maybe most importantly, I volunteer with Foundation For Girls to help educate young women and girls.

Thanks for sticking around to read a bit about my story! I'd love to hear more about you. Please feel free to connect with me on the various platforms or go ahead and comment on this post below.

JavaScript30 - Day 1

OK! on to the challenge. For today's challenge we will build a drum kit. The style sheet and HTML are already built out. I'll just be following along and building the JS.

keycode.info - we will be using this to determine which key is being hit on the keyboard for the drum kit sounds.

data-key - basically comes from a history of folks making up their own properties. So now data attributes exist so you have to use "data-" to create the property.

<script> asdf </script> - for this challenge we will be building the script out directly into the index.html file.

<script>
  window.addEventListener("keydown", function (e) {
    // console.log(e); 
    // KeyboardEvent {isTrusted: true, key: 'e', code: 'KeyE', location: 0, ctrlKey: false, …}
    // console.log(e.keyCode);
    // A = 65, S = 83, etc.
  });
</script>

Right now we are trying to determine what keys are being pressed, so that we can write code to correspond with them. Now if I recall from the initial watch of the video we won't call out exact keyCode numbers. Instead we will use the keyCode property(value?) to create the function/action.

Because we are doing an attribute selector (data-key) we won't have to create a class for each key we want to connect action and sound to.

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    // console.log(audio);
    // "A" keydown - this shows it's selecting the correct audio <audio data-key="83" src="sounds/hihat.wav"></audio>

We've confirmed that the audio is connected to the key we are pressing.

    if(!audio) return // stop the function from running all together, if the key doesn't have sound connected
    audio.currentTime = 0; // rewind to the start
    audio.play();

Now we've added an if stop, so that if the key does not have audio connected to it. Then it does nothing.

Adding play for the audio, so now when we hit the key for any of the drum kit buttons, there is now sound.

Adding audio currentTime so that we can hammer any key and the sound will repeat immediately instead of waiting for the entire soundbite to play before the key can be pressed again to initiate the sound.

    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    // console.log(key);
    // "A" keydown - <div data-key="65" class="key">…</div>

The key variable will now select the key elements in the HTML.

This will make it so we can make the buttons animated. The style is already created in the CSS. We just need to tap into that CSS to make them appear to be animated.

    key.classList.add('playing');

This will now add the styles to the button selected.

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

function removeTransition(e) {
  console.log(e);
  // transform
}

Doing a few things here. Selecting all of the .keys, so that we can remove the transition after the key action occurs.

Writing the function to remove the transition, running console log so we can find the correct propertyName (transform).

    function removeTransition(e) {
      // console.log(e);
      // transform
      if(e.propertyName !== "transform") return; // skip it if it's not a transform
      console.log(e.propertyName);
    }

Logging out the propertyName to confirm we are appropriately selecting transform for drum kit keys.

console.log(this);
// "F" keydown - <div data-key="70" class="key playing">…</div>
this.classList.remove('playing');

this - always going to be what got called against it. Still not fully sure how to know this without direction.

In the example provided, the instructor is saying it's going off the key.addEventListener, so it's going to listen for that key that was pressed.

So now it removes the style added after the elapsed transition time.

  window.addEventListener("keydown", playSound);

  function playSound(e) {
    // console.log(e); 
    // KeyboardEvent {isTrusted: true, key: 'e', code: 'KeyE', location: 0, ctrlKey: false, …}
    // console.log(e.keyCode);
    // A = 65, S = 83, etc.
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    // console.log(audio);
    // "A" keydown - this shows it's selecting the correct audio <audio data-key="83" src="sounds/hihat.wav"></audio>
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    // console.log(key);
    // "A" keydown - <div data-key="65" class="key">…</div>

    if(!audio) return // stop the function from running all together, if the key doesn't have sound connected
    audio.currentTime = 0; // rewind to the start
    audio.play();

    key.classList.add('playing');
}

Finally, the instructor recommends separating the window event listener and the function (playSound) for cleaner code. Then place the window event listener at the bottom of the code.

Here is the final script:

<script>

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)

    if(!audio) return // stop the function from running all together, if the key doesn't have sound connected
    audio.currentTime = 0; // rewind to the start
    audio.play();

    key.classList.add('playing');
}

function removeTransition(e) {
      if(e.propertyName !== "transform") return; 

      this.classList.remove('playing');
    }

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

    window.addEventListener("keydown", playSound);
</script>

GitHub Repo for JavaScript30 Drum Kit

Play the Drum Kit here!

Tune in tomorrow for Day 2.

Questions? Comments? Sound off below!