Although I like freelance web development, I am actively looking for a stable full time gig, which means I spend a lot of time looking and applying for jobs. A lot of job descriptions I come across require an understanding of everyone’s favorite client side scripting JavaScript library, jQuery. I have done quite a bit of jQuery as it turns out, but in the current frontend landscape dominated by frontend frameworks like Angular, React, and Vue, jQuery’s use is seemingly on the decline both among frontend professionals and in my own work.

That doesn’t stop employers from wanting their candidates to have a deep knowledge of the library, and for good reason. As a web developer, jQuery is a powerful tool that immediately makes DOM scripting and designing interactive components easier. It’s a sort of rite of passage along the JavaScript path. So I dove back into a few older projects and revamped them on codepen as a way to demonstrate my proficiency with jQuery.

The first project is a Touch Type Trainer that uses bootstrap’s wells, glyphicons, and grid system to construct a keyboard on screen. The keyboard toggles between upper and lower case based on the shift key, displays the key pressed and highlights it, and adds a green check if the user types a character correctly, or a red x if incorrect. At the top of the screen a sentence is displayed from an array of five sentences. As the user types, their progress is tracked along the sentence with a highlighter pointer. Once at the end of the sentence, the next sentence from the array is displayed until all sentenecs have been typed. At the end of the game an alert box reports the user’s words per minute. Check out your typing skills here.

The second project,ShapeCanvas, is a page with forms that correspond with shape classes in the script file and a canvas in the center of the page. Enter numbers into the form and press the create button to see a shape of the size entered output at a random location on the canvas. Click a shape once to get statistics for the shape, and click a shape twice to remove it from the page. Check this pen out here.