About

The idea for this project was to write JavaScript that enhances a web page rather than keeping it from working if JavaScript isn't enabled. The project files came with the basic stylings and HTML containing a list of 54 students, each with an image, name and email address.

I used to JavaScript to hide the list and show only ten at a time. JavaScript is also employed here to create and append pagination buttons as well as a handy search feature.

I added some cool JavaScript fueled transitions between pages, and a nice message feature for when the search function produces no results.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Images and original code provided by Treehouse.

About

Here I've built a sign up form for a "FullStack Conference."

Functional and unobtrusive JavaScript brings interactivity, smart options and user firendly error messages that function in real time to help users complete the form with valid information.

Luhn's algorithm is used to validte the credit card number.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Base HTML and CSS provided by Treehouse.

About

This cool Tic-Tac-Toe project came with the basic markup and styling. To which I added all the JavaScript programming to allow users to input there names, to track whose turn it is, and to declare a winner.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Images and original code provided by Treehouse.

About

This project takes user input and then uses AJAX and JavaSCript Promises to make a request to the OMDb movie database.

Search results are displayed with movie posters from the IMDB database.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Base HTML and CSS provided by Treehouse.

About

Written entirely from scratch, apart from a few npm modules, this command line application useses Node's awesome Asyncronous runtime environement to scrape info from the website shirts4mike.com

After the app is initialized via the comman line, the initial set of scrapes will occur at the next tick of the minute hand, and then again every 24 hours.

Item details such as URL, imageURL, item title, and price are scraped and then placed into a programmatically generated CSV file which is placed in a rogrammatically generated sub-folder named "data".

About

This custom photo gallery was an educational project that I built from scratch using only a few mock-up images and a brief project description.

Styled and powered by my own CSS and vanilla JavaScript. The images in the gallery are matched to captions and made searchable. Type something from any caption into the search bar and matching photos highlight on input. When clicked, photo thumbnails open in a simple custom light-box complete with captioned text and slider capabilities that support arrow keystrokes.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Photos provided by Treehouse.

About

A fuctional dashboard for a feaux web app. Built from scratch using only a mock-up image, a brief project description, and an awesome chart library, Chart.js.

Besides Chart.js and the smoothscroll.js library, I wrote all my own JavaScript and CSS for this project. A custom responsive sticky nav, custom alert and modal, and a settings section with functional toggle switches that alter the global color scheme. Special settings use local storage for data persistence.

The SVGs provided for social media icons didn't match the ones in the mockup and didn't look as cool, so I dug into the XML and made the necessary adjustments.

Just for fun I created a matching favicon for this project.

Hosted by the awesome folks over at GitHub. : ) Thanks!

About

Here I've built a custom video player with a variety of playback control and navigation options. The continuously updating time bar is click-able. The text highlights appropriately and is also click-able. Complete with a functioning cross-browser fullscreen option and volume control. And the whole thing is responsive.

Initially, the OGG and MP4 files were too large to upload to Github. After some research into GitHub LFS, I was able to upload those larger files, but then I was provided with and asked to use smaller versions of those videos.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Videos provided by Treehouse.

About

This project came pre-built. However, it was lacking in sufficient accessibility and responsiveness. Text and background colors lacked at least the minimum ratio of 4.5. Tabular data was stored in a “pre” tag and required complete reformatting. Inputs lacked matching labels. Tab Index was disordered. Images were inappropriately presented with misused “alt” attributes. Code lacked any ARIA attributes.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Images and original code provided by Treehouse.

About

This initial project seemed vary much like a gauge to test requisite Front-End Development skills. Mock-ups and a mid-level description was provided. From that I built a responsive single page example website. The header image was adjusted and optimized in Adobe Illustrator. The three column layout is lightweight and responsive. The modal was custom built using only vanilla JavaScript.

In an effort to go the extra mile, I took a screen shot of the header image provided, cropped out a small portion, and with a free online .ICO icon generator, I made a custom favicon for this project.

And I went with a little Hipster Ipsum for my text filler here.

Hosted by the awesome folks over at GitHub. : ) Thanks!

Images and original code provided by Treehouse.

About

I dig movies, so I chose the OMDB (Open Movie Database) website to show off my AJAX/API skills.

I went with jQuery for the XHR requests because research said it was the most supported.

I picked the movies, made my requests, iterated over the data and styled it appropriately. I even added in a search feature so you can look up your own favorite movies.

Originally, movie posters were loaded via an IMDB URL that was part of the response object, but doing that over the web is called hotlinking. It eats bandwidth and here resulted in a 302 error. So no posters for the search option and all other posters are simply hardcoded. Bummer. But still a fun project.

Hosted by the awesome folks over at GitHub. : ) Thanks!

About

When I first recieved the files, this project came in at a whopping 11MB, with over 43 requests and images that were thousands of pixels wide. The JavaScript was linked to in the "head" via 5 "script" tags along with 10 links to external stylesheets. The CSS was weighed down with hundreds of MB of unused fonts. None of the "img" tags contained "alt" attributes. There were a few responsive issues that needed addressing as well as a few HTML issues that hindered validation.

After working my magic, the entier project weighed only 1.2MB. Requests were reduced to a reasonable 26 thanks to minification, concatination, and a few embedded SVGs. All images were resized and optimized in Illustrator. And the HTML validated.

According to Google's Page Speed Insights and GTmetrix, this site could further benifit from leveraging browser caching, but unfortunately, GitHub doesn't allow working with .htacess files in their reops. Not that I'm complaing. : )

Hosted by the awesome folks over at GitHub. Thanks!

Images and original code provided by Treehouse.

About

I started contracting for Treehouse, doing code reviews and a little moderating, but I wasn't sure how I should invoice for this. I tried pen and paper. The results were undesirable. I scoped the web but found next to nothing that was free, awesome, and easy to use. Next I threw together some HTML to make a table that I printed and filled out with a pen, but I still wasn't pleased with the results. That's when I said "frack it" and decided to just build my own custom invoice app.

This thing is customizable, allowing for a unique number of rows for each invoice and for a front sheet that sumarizes a collection of invoices. Entered data persists with local storage until you decide to clear it out. So if you lose the page for whatever reason, the next time you open it, all your entries will be there safe and sound.

JavaScript powered calculations update your total time and total due as you make each entry, which is a great time saver.

Hosted by the awesome folks over at GitHub. : ) Thanks!

About

A few months after buiilding the first version of this custom invoice app, I felt like I had leveled up my JS skills and I was feeling a little embarassed by the quiality of code for that first version. So I rebuilt the whole thing.

This thing is customizable, allowing for a unique number of rows for each invoice and for a front sheet that sumarizes a collection of invoices. Entered data persists with local storage until you decide to clear it out. So if you lose the page for whatever reason, the next time you open it, all your entries will be there safe and sound.

JavaScript powered calculations update your total time and total due as you make each entry, which is a great time saver.

Hosted by the awesome folks over at GitHub. : ) Thanks!