JavaScript 30: JavaScript Drum Kit

-


image JavaScript 30
JavaScript 30 with Wes Bos








Before we begin, I would like to point out that I have not had a good experience with JavaScript.  Unlike HTML and CSS, JavaScript felt like a lot of code and work.  What I mean to say is that in the past, instead of using JavaScript, I used frameworks and other technologies to help make things work without all of the fuss. From what I understand, this practice of being a "script kiddie" by copying and pasting existing code is a normal progression of the learning process.   This didn't end as well as I hoped because life jumped on top of my code learning adventure and the train came to screeching halt. In any case, below starts my journey back onto hand coding "vanilla" JavaScript.  First stop, JavaScript Drum Kit.  (side note, I made a drum kit back in the day using Flash)

This was the the 1st lesson out of the 30 that are a part of the JavaScript 30 course.  For this lesson, I was able to create a drum kit using with most of the home row keys (A, S ,D ,F, H, J, K, L).  All of the sound samples were provided along with the HTML and CSS.  However, the JavaScript was all hand coded.  I ran into a few issues with punctuation and mixing up terms like transition for transform which caused a lot of the code to not function.  Of course, after 30 minutes of reading the code line by line, I was stumped and ended up looking at the end result code for comparison.  It is a good feeling to find the solution even though it was simple.  The "pain" of this experience was eye opening and in a weird way welcoming.  Coding isn't easy and often times its the smallest factor that gets in the way.   In any case, I'm really glad to go through the exercise.  I changed the background to add a bit more flare to it.  Perhaps after I complete the JavaScript 30 course, I will revamp each project to make it more my style and convert it into something more original.  Unfortunately, I have yet to invest into a service to host any of my projects, but I will eventually do this and share the result.  For now, I have provided screenshots for comparison.


Original JavaScript 30: JavaScript Drum Kit



Slightly Modified JavaScript Drum Kit



Comments

Post a Comment

Popular posts from this blog

Lynda.com: Become a Unity 2D Developer (Day 11..Sort of)

-
Image
UNITY 2D LEVEL DESIGN (...continued part IV) Unfortunately, I had to take a huge departure from learning Unity.  Let's just say that I'm also studying Cisco stuff.  Needless to say, I figured it was time to finish what I had started.  Switches Create Switches This chapter was similar to other animation tutorials, specifically in the setup process.  First, I had to create a switch object by utilizing the three images of the switch, which are the three states of the switch, specifically "Down, Up, and Idle". Afterwards, it was a matter of setting up the animations and then sequencing them.  I created three animations for the switch: SwitchUpAnimation, SwitchDownAnaimtion, and SwitchIdleAnimation.  From there, the AnimState was configured according to the sequence of the animation. Switch Collision Trigger Creating the switch now leads to implementing code.  First, I created a new C# script and then proceeded to create new funct...
Read more

Back On the Coding Horse

-
I am finally getting back into coding.  It has been a long hiatus, but the time away helped refocus my career goals.  Nevertheless, I am going to dive into coding.  Within this learning blog, I will work on web development and video games.  Yes, it is an ambitious goal, but I figured I would shoot for the stars.  If I land on the moon, that's okay too.  Below are a list of things I would like to learn. Web Development HTML CSS JavaScript Application/Game Development C++ Rust Python Although I may have a BS in Web Design and Interactive Media, I have yet to gain traction in my career.  Yes, I'm in IT currently.  I make a decent living, but I cannot help but want more than troubleshooting issues and documentation.  With all that said, to get back on the "coding horse", I'm going to take full advantage of the free tutorials and resources I have at my disposal.  First up is JavaScript 30 by Wes Bos.  In the web development world, he's w...
Read more