miffili / binarytimer

⏱. A binary timer which was inspired by the theme for AGDQ2018

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Binary Timer

Inspiration

Every year the great team of Games Done Quick organizes at least two major one week long speedrun marathons. A whole week a huge variety of awesome games is displayed and live streamed. This time all donations went to Prevent Cancer.
This years theme of AGDQ2018 was inspired by the movie THRON. It wasn't super obvious, but the timer had a binary background this year. After my brother pointed it out, I was really fascinated by it. I had just read about the binary number system a few weeks before and this seemed like a good challenge to figure it all out for myself.

Implementation

Since the speed runs don't last for hundreds of hours, the background timer display was limited to 7 columns – two for the hours, two for the minutes, two for the seconds & one for the deciseconds. I decided to limit my timer to 5 digits, so the longest this timer runs is 59:59.9 minutes.
It was a lot of fun figuring out the mechanisms behind the binary lights and keeping the THRON theme in mind, I designed the web app in a futuristic/minimal style.

🔥 On January 28th the Binary Timer got featured in the Picked Pens on codepen.

Made with

  • HTML, CSS, vanilla JavaScript

Preview

Check out the web app live: 📺

Screenshot of the Binary Timer

About

⏱. A binary timer which was inspired by the theme for AGDQ2018


Languages

Language:CSS 37.5%Language:HTML 35.6%Language:JavaScript 26.8%