Go Back In Time with HTML/CSS/JS/jQuery

NOTE: Project is under construction!

What is this?

This project looks like the time circuits from the Back To The Future movie.

Click here to see this project in action!

Pics

What does it do?

Displays the user’s current time using javascript
Has blinkie lights
Warning: Does NOT perform time travel. This app only helps you pretend to time travel.

Why did I make this?

I wanted to do a project with broader appeal compared to the anime projects I made. (See my portfolio for those anime projects)

NOTE: There are a TON of Time Circuit projects already, including people making real life working props (google for those props, they are amazing). What makes mine different? I’m not relying on a direct screenshot to skin the box (I found a free metal mottled texture to use). The tech stack for mine is all front-end web related (other projects are native apps, like specifically for Windows, or just the iphone).

What technology skills were learned/retrieved?

Front End

What are this project’s limitations?

Still under construction, lots of bugs and things not implemented yet (issues can be seen here)
No dial pad. Making a dial pad like in the movie would triple or quadruple project time. Currently exploring input options for destination and last time departed areas.
Fixed size. I explored a design that would resize on the fly, but ran into issues with font resizing.
Backlit design: The ‘hardware’ is always a gray silver because of the backlit display of the monitor. I wrote an enhancement request to myself asking to style a ‘dark’ version that looks better when you want to display this thing inside of a car at night.
Not-exact LCD font. There’s some interesting movie history to this (the movie uses some custom LCD lettering), so I had to find an LCD font that was as close in spirit to it.

Tech

moment.js - this project uses moment.js to make formatting the date so much easier than if I had to roll my own. From http://momentjs.com/
Other: jQuery, SASS, Brackets editor, GIMP, HTML5 bolierplate

Fonts

Digital-7 MonoItalic, from: http://www.fontspace.com/style-7/digital-7
Microgramma D OT Medium Extended font, from: http://fontsup.com/font/microgramma-d-ot-medium-extended.html

Other

Mottled metal texture graphic is from here: http://insightdesigns.co.uk/blog/2010/05/23/free-texture-grab-grunge-and-scratch-overlays/