Panasonic – Energy Caculator app

Front-end/back-end development (HTML5, CSS3, JavaScript, Google Analytics and Wordpress/Gravity Forms) - July 2012

Consumer App

My task was to build an energy calculator app to inform consumers and electrical distributors about the environmental and economic benefits of switching to Panasonic's LED bulbs.

The calculator functionality was built from scratch using HTML5/CSS3 and JavaScript. Modernizr was utilised to help deliver CSS3-animated page transitions to capable browsers, while providing adequate fallbacks for non-capable ones. I also produced a custom jQuery plugin to enable custom, cross-browser +/- spinners on the input number type fields.

Google Analytics' Event features were utilised to allow detailed results tracking of specific variables (Hours Per day, Savings, Wattage, No. of Spotlights, Years), giving Panasonic's Data team a detailed breakdown of each calculation.

Try out the Consumer app
(IE7+ and all modern browsers supported)

Business App

Although very similar, several interface changes were made to the Business app to satisfy differing energy requirements, this is demonstrated by the replacement of the slider and spinners from the Consumer site with a free text entry box with a maximum of 10,000 bulbs, along with the inclusion of a custom carousel.

Try out the Business app
(IE7+ and all modern browsers supported)