Day 46: Finishing jQuery

Exciting! I have finished the jQuery part of the FreeCodeCamp map and can now move on to JavaScript Basics! Let’s take a look at the code from the last stage of the jQuery Basics track at TreeHouse. First, my badge:


Creating a Simple Drawing Application badge

and now, a quick walkthrough of the app.js file where the magic happens:

Sets variables for color, $canvas, context, lastEvent and mouseDown. Explain these more throughout the code…

OK, this part of the code switches between the sibling elements, moving the selected class between them. The current color is cached once it is the selected color.

This toggles the New Color selector up and down.

OK, so this is where the new color is created. There are three range sliders that look like this:

and when you move the sliders they go through a range of 0 to 255. By moving through them you can create all sorts of colors. Like so:

This function takes the number selected in each range and puts it in the proper rgb code and outputs the number, creating the color and adding it to css.

OK, so this takes the color created above and appends it to the list when Add Color is pressed. Goes from this:

To this:

This last code is where we are able to actually write on the canvas. So it uses mouseEvents to determine where in the X/Y Axis you are on the canvas, where you press the mouse down, where you release it and also releases the mouse if you leave the area!

On to JavaScript!