JavaScript 

This page is just a little place for me to refer to and/or share some JavaScript coding examples with others. I think JavaScript is a really fun language and I love learning more about it every day.

NOTE: To view the source code for each example below, simply right-click on each of the example pages then select the "View Page Source" option from your web browser's popup menu.

• Dependent Drop-down Selectors - This page illustrates how to code dependent drop-down selectors. That is, this example shows how the value of a "parent" selector element determines how the values of its child (or dependent) drop-down selector element gets populated.
• Matrix Swap - This was an interview question I was asked once ==> Write code to swap a 2-dimensional square array across the diagonal: [0,0], [1,1], etc. I have since modified the example slightly to include code to populate and display the matrix as well as to accept input to determine how big the square matrix should be. I think it's a pretty good interview question and I have had the opportunity to ask it to about a half of dozen developers while I worked for SketchUp.
• Functional Programming Examples - Here are some examples I've worked through in trying to get a better understanding of functional programming using JavaScript.
• Array and String Problems #1 - Here is a little example that finds the first non-repeating character of a string.
• Array and String Problems #2 - This example removes characters from a string.
• Mortgage Calculations - This example computes a fixed monthly mortgage payment.
• Callbacks vs. Promises - An example illustrating the difference between Callbacks and Promises. Promises can be a little hard to understand and hopefully this example will shed some light on how to use them and how they differ from "old-school" Callbacks.
• Make-Music's Coding Exercise - A coding test I did in early 2018 for a job interview. I almost got the job too, but MM's budget abruptly changed in the middle of the interview process and they closed the position I was interviewing for. Of course I was disappointed, but it was good practice coding a solution for their "Power Intervals" problem.
• Time Slider Widget - A little coding exercise using an HTML Input Range tag to create a little "Time Slider" machine.
• RGP Transcriber and Phrase Trainer Tool - A little tool to help fellow musicians transcribe their favorite music. This tool enables one to slow down the tempo of a piece as well as to set starting and ending points within the song to create a section of music or loop which will repeat over and over again. This is very useful when trying to learn how to play a piece of music or a solo. You can use this loop and tempo setting as a "phrase trainer".

If you'd like to see more JavaScript that I've authored you can simply view the source code (and HTML) running on each page of this website. The main scripts shared across all of the main pages on this site can be found in a file called flupe-scripts.js. All of the JavaScript is easy to read as I haven't minified or obfuscated any of it. I think you'll be surprised at how much is happening under the covers for such a "simple" website.

Most of the code was written using plain vanilla JavaScript, but I use some JQuery to handle the animations. For instance, showing and hiding the quotes as well as swapping images in and out of the image carousel on the home page are both done with JQuery. JQuery also takes care of the smooth scrolling feature used throughout this site which is especially handy on the lessons page as there is a lot of content to navigate and scroll through.

One of the coolest features I've built is an Audio Player on the Music page using HTML5's built-in <audio> tag. This is something I'm very proud of and if I do say so myself, it's pretty cool. Also, the player plays music I wrote, performed, recorded and produced, so this player helps me share that aspect of my life with others.

NOTE: There's also a "hidden" Pink Floyd Mode for the player which enables it play some of my favorite Floyd albums. So, be sure to check out audio-player.js to see how all of that works.

Also, be sure to check out how the photo gallery works on the music page as there's some cool stuff going on there. All of the logic can be found in a script called music.js. NOTE: Care was taken to ensure the gallery could handle viewports with varying widths, so it's responsive. I've also integrated the photo gallery with Lightbox2 which enables each image to be displayed in a modal window when it's clicked on.

Finally, I've built many of the features with feature toggles such that they can easily be turned on and off. There's also a debugging flag to turn console logging on and off. I also make use of feature configuration page objects to control how things work. All good stuff!

Thanks for your interest.