Projects

Here are some of my recent projects


For the complete story about how I built these sites check out my Blog Descriptions.

Superhero Secrets

I built this using the Devise Gem for the Authorization and Authentication features.
I used the Paperclip Gem and Amazon's Hosting to store the images.
Everyone can see the superhero names and images, but only members can see the superhero secrets.
Become a member by Signing Up.
Members can edit and delete only their own secrets.


Carousel Pics

I built this using the Owl Carousel Gem. It is responsive to Touch Screens.


Lite-Brite

I built this using JQuery. There is even a random colors option.


Contact Form

I built this using a combination of the Simple Form and Mail Form Gems. I am able to receive secure messages via SendGrid.


Holmes and Rahe stress scale

I built this using JavaScript. Click on the checkboxes to find out how stressed your life has been.


Start and Pause the Changing Background Color

I built this using JQuery. You can start and pause the continuous changing of the webpage's background color.


Compound Interest Calculator

Enter your age, initial contribution, and the interest rate you expect to learn. Find out how much your money will be worth when you retire thanks to compound interest.


Eye See You

Each time you load the page, a random set of eyes will follow your every mouse movement. Built with JQuery and JavaScript.


Real Time Calculator

This calculator performs operations in real-time. I used AJAX (Asynchronous JavaScript and XML) to allow the calculations to occur and be displayed without having to reload the page.


Spinning Wheel

I'm not exactly sure what I built or why I built this :) In any event, the image rotates and pauses rotation when you press the Start/Pause button. The JQuery Rotate library was used for this effect.


Tip Calculator

This is a simple tip calculator that uses JavaScript to perform the calculation. There are validations to ensure that the only positive numbers are accepted.


Mystery Movie

Can you guess what the mystery movie is?
I built this using the JQuery UI which provides the Accordion User Interface. The hints are comprised of images and an audio clip.


Pomodoro Timer

See how much you can get done in 25 minutes of focused effort. This timer has a start and reset as well as a pause and resume.


Make It Rain

This is a silly and fun application of JQuery and JavaScript event handlers. Click on the cloud and make it rain, except metaphorically ;)


Sticky Notes

These are like Post It Notes, but you don't have to worry about them falling off. This was built with Ruby on Rails and lots of CSS Styling, plus a personalized (aka horrible) button design by myself.


Action Cats

Since cats own the internet, I let them take over one of my pages. These are JQuery rotations and animations and many event handlers.


Weather Now

Enter a city and find out its current temperature. This was made using the Open Weather Map API which provided data in the JSON format.


360 Rotation

This displays the panoramic view of a pot and a Koopa Troopa by using JQuery Reel. See for yourself by clicking on an image or by clicking on an image and then moving the mouse to the right.


Scrambled Words

This shows a scrambled word and then checks to see if your guess matches the correct answer. JavaScript and JQuery functions were used along with Regular Expressions to allow empty spaces in the guesses.


Pros and Cons List

This was inspired by Benjamin Franklin's technique for making decisions. To help you decide, type in the situation in the top box and then add the pros and cons in the boxes below. Finally clear away your worries by pressing the Clear Everything button. This was built with JavaScript and JQuery.


Random Quote Generator

This idea came from Free Code Camp's Random Quote Generator. I have added a random image in addition to the random quote. Furthermore, neither the same image nor the same quote will appear twice in a row.


Design a Webpage

This idea came from Codecademy's Website Project. This was done exclusively with HTML and CSS. It was great a learning experience to get back to the basics, however, I am more than happy to return to using Twitter Bootstrap and Sass.


Find Recipes

Enter an ingredient and get recipes and nutritional information instantly. This was made using the Edamam's Recipe Search and Diet API which provides access to over 1.5 million recipes from over 500 sites.


Calendar and Date Tool

Find the difference between two dates or find a date in the future by entering a number. Built with JQuery UI.


Bouncing Balls

This used HTML Canvas with JavaScript and was based on this tutorial. This site shows how a project can unify physics, JQuery, HTML animation, mouse listeners, and much more.


Meditation Timer

This site used the Pomodoro Timer as a starting point.
This page lets you determine the duration of meditation, how often to hear reminder bells, and even lets you pause and resume your meditation.


Fun with Closures

This site is a simple explanation with demonstrations of JavaScript Closures. For more information and helpful links, visit my blog entry


Clock

This clock displays the time and city. This site uses the Telize API to ascertain the current city by the IP Address and JavaScript functions to detect and display the browser's current time.


Projects Slideshow

This displays a few of my projects using The Owl Carousel Gem. The carousel responds to touch navigation and the images are links to the sites.


Flashcards

These are flash cards built using Ruby on Rails with the JQuery UI Accordion. This site uses Active Record to manage the logic and the data.


Are you ready for your first programming job?

Take this (somewhat satirical) survey and find out if you are ready for your first developer job. Built with JQuery and JavaScript, it is similar to my Holmes and Rahe stress scale but built even more efficiently and effectively.


Sedona Method

This is an introduction to The Sedona Method which is a set of simple questions designed to release stress. Built with JQuery and JavaScript with a few well-thought out loops, if-else statements, and conditional logic constructs.


Popping Balloons

This site used HTML Canvas with JavaScript and was based on this guide. I added more balloon colors, a pop up message when the last balloon has been popped, and the ability to add more balloons.


Translator

This site uses the Yandex API for translation. JavaScript functions allow translations to occur without a page reload.


HTML5 Canvas

This was just me playing around with some drawings and animations using HTML5's Canvas in conjunction with JavaScript functions.


Likable Pets

This used Ruby on Rails along with Amazon Web Services to store images of likable pets. The Paperclip Gem was used to attach the images while AJAX was used to track the number of likes.


Reflections

This was built with JQuery UI Tabs. These are my reflections on my building, blogging, and learning.


Tip Calculator and Bill Splitter

This is my first AngularJS Site. It is a real-time tip calculator with bill splitting capability.


99 Bottles of Beer

In honor of Labor Day, I recreated this folk song with JQuery and JavaScript.


TV Shows with AngularJS

This used AngularJS and was based on this tutorial. This site demonstrates AngularJS features such as controllers, scopes, and bindings.


Etch a Sketch

This idea came from The Odin Project. It is JavaScript and JQuery DOM manipulation with colorful results.


Web Help Homepage

This site used HTML, CSS, and Bootstrap. It was the first step towards emulating this site.


Pomodoro Timer with Improved Styling

This site used the same JavaScript and JQuery code as this previous site. I used Bootstrap to imitate elements of this superb Pomodoro Timer.


Bootstrap Features

This used Bootstrap and was based on this video. This site demonstrates Bootstrap features such grid layouts, responsive design, and Scrollspy.


Pomodoro Sign In

This used Bootstrap and was based on this page. This site used nested grid layouts and responsive design.


Bootstrap Layout

This used Bootstrap and was based on this video. This site demonstrates Bootstrap features such panels, navs, and responsive design.


Cozar Page

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this this site.


W3 Schools Bootstrap

This used Bootstrap and was based on this course. This site demonstrates Bootstrap features such Contextual Classes, Responsive Embed, and Badges.


W3 Schools Bootstrap 2

This used Bootstrap and was based on this course. This site demonstrates Bootstrap features such Navbars, Dropdown Menus, and Forms.


Web Help Homepage 2

This site used HTML, CSS, and Bootstrap. It was another step towards emulating this site. The first step can be found here.


Contact Page

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this image.


Made Page

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this this site.


Sitepoint Bootstrap

This used Bootstrap and was based on this Bootstrap 2.0 tutorial. This site demonstrates Bootstrap features such Glyphicons, Grid Layouts, and Collapsible Nav Bars.


Lightbox

This site used JQuery Lightbox to overlay images on top of the current page. See for yourself by clicking on an image.


Fireworks

This site used HTML Canvas with JavaScript and was based on this walkthrough. For more information about what the fireworks represent, visit my blog entry.


Architects

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this Bootstrap 2 site.


Found My Pet

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this Bootstrap site.


404 Page

This used Bootstrap and was based on this UX advice. This site demonstrated the importance of giving the user a clear path when he or she is lost.


Make It Rain Landing Page

This site used Bootstrap and was based on this lesson. This landing page demonstrated the power of a simple User Interface combined with questions that lead logically and emotionally to a Call to Action (signup and button click).


Bootstrap 2 Portfolio

This site used the JQuery Quicksand Plugin and was based on this demonstration.


Happy Together

This site used JQuery Tubular to play the Turtles "Happy Together" in the background.


JQuery Portfolio

This site used JQuery to create a filterable portfolio and was based on this layout.


To Dos with AngularJS

This used AngularJS and was based on this video. This site demonstrates AngularJS features such as controllers, directives, and forms.


Creative Portfolio

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this layout.


Responsive Panel

This site was based on this walkthrough. This site demonstrated that CSS, media queries, and JQuery can achieve a responsive design.


Pet Shop

This site used JavaScript, JQuery, and Bootstrap. My goal is to rebuild this site in the future but with AngularJS instead of JQuery...


AngularJS in Twenty Minutes

This used AngularJS and was based on this introduction. This site demonstrates AngularJS features such as controllers, filters, and modules.


Active Landing Page

This site used Bootstrap and was based on this template. This landing page shows what I do for fun outside of coding.


AngularJS Calculator

This used AngularJS and was based on this example. This site demonstrates AngularJS features such as scopes, directives, and two-way binding.


Stylish Portfolio

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this layout.


AngularJS Retirement Calculator

This site is an improved version of the Compound Interest Calculator because it performs the calculations instantly.


AngularJS Countdown Timer

This site is a basic Countdown Timer with Resume and Stop functionality.


AngularJS Random Quotes

This site used AngularJS directives including ng-click to display quotes. JavaScript was used to select random array properties.


AngularJS Retirement Calculator 2

This site is an improved version of the Compound Interest Calculator because it displays the yearly earnings and total earnings instantly.


AngularJS Currency Calculator

This used AngularJS and was based on this documentation. This site demonstrates AngularJS features such as Dependency Injection, Factory Functions, and Controllers.


Creative Portfolio 2

This site used HTML, CSS, and Bootstrap. It is an upgrade from this portfolio site because it uses JQuery to categorize the websites.


String Interview Problems

This site has demonstrations of a few common String Interview Questions solved with JavaScript.


AngularJS Routing

This used AngularJS and was based on this example. This site demonstrates AngularJS features such as Route Service, Templates, and Controllers.


Curtains

This was built with JQuery Easing and was based on this tutorial. This animation provides a link to my lessons learned from 75 days of building sites.


AngularJS Templates

This used AngularJS and was based on this walkthrough. This site demonstrates AngularJS features such as Routes, Templates, and Controllers.


AngularJS Routes

This used AngularJS and was based on this in-depth explanation. This site demonstrates AngularJS features such as Routing, Templates, and Views.


AngularJS Clock

This used AngularJS and was based on this Stack Overflow post. This site demonstrates AngularJS features such as Intervals, Promises, and Services.


Array Interview Problem

This site has a walkthrough of an array Interview Question solved with JavaScript.


Legend of Korra Benders

This used AngularJS to sort The Legend of Korra characters by their bending abilities. This site demonstrates AngularJS features such as JSON, Factories, and Routes.


Sushi Menu

This used AngularJS and was based on this tutorial. This site demonstrates AngularJS features such as Filters, Ordering, and Services.


AngularJS Examples

This used AngularJS and was based on this summary. This site demonstrates AngularJS features such as ng-repeat, Formatting, and Filtering.


AngularJS Quiz

This used AngularJS and was based on this Stack Overflow question. This site demonstrates AngularJS features such as Bootstrap Collapse, Directives, and Templates.


PhoneCat App

This used AngularJS and was based on this tutorial. This site demonstrates AngularJS features such as Filters, JSON, and Controllers.


Motorsport Rankings

This used AngularJS and was based on this excellent walkthrough. This site demonstrates AngularJS features such as APIs, Templates, and Directives.


AngularJS Examples 2

This used AngularJS and was based on this guide. This site demonstrates AngularJS features such as ng-watch, Scopes, and Listeners.


Pets Speak

This used AngularJS and was based on this video introduction. This site demonstrates AngularJS features such as Directives, Templates, and Scopes.


Hunger Games Quiz

This used AngularJS and was based on this tutorial. This site demonstrates AngularJS features such as Directives, Factories, and Modules.


AngularJS Animate

This used AngularJS and was based on this post. This site demonstrates AngularJS features such as Repeat, Show, and Animate.


And More to Come...