A binary timer which was inspired by the theme for AGDQ2018
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
preview
README.md
index.html
script.js
style.css

README.md

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