This exercise was done in 1 day to demonstrate to a client that I could utilize certain technologies. I was interviewing for a project recently, and the client asked about my experience with object design, AJAX, jQuery, event listeners, and CSS layouts. I could have crafted a verbal response, but I looked for some way to demonstrate what I know. So I looked for a model with a small enough feature set, and took the next day to build... a toaster.

This could easily be done in Flash, but the pictures and animation were never the point of the exercise. The UI is made of div elements styled with CSS backgrounds I made that day in Adobe Illustrator. They are animated and event-bound via jQuery. User interaction with the toaster calls public methods of a JavaScript "toaster" object (in the browser). The public methods execute private methods not accessible to the browser (proper encapsulation). The toaster object's private methods do jQuery AJAX calls to server-side JavaScript files, which execute on load.

So here's my AJAX-enabled object-oriented toaster. Feel free to look at the source code. Based on the toaster settings, you'll get light, medium, or burnt bread or bagels.

If you are going to use it, you, um... have to plug it in first. It's a toaster.