Wednesday, August 9, 2017

simple countdown timer

My cousin posted
Thanks for the birthday wishes, folks! Tech dorky friends- if you want to give me a gift, what I really need right now is a countdown timer that displays in its own window, without a lot of other crap in the window. The ability to set the font is a huge plus. 
It is *amazing* how hard this is to find through casual Google searching.
Well, I'M a tech dorky friend! So I did an exercise in quick and dirty vanilla js and made https://stuff.alienbill.com/countdown/ . Its default colors are black on green (I think he's doing a green screen process and using it as an overlay) but you can change the RGB for the starting color, and then what to show when the counter hits zero, like this
https://stuff.alienbill.com/countdown/?bgcolorstart=666666&bgcolorend=111111&fgcolorstart=00ffff&fgcolorend=ffff00

At any time you can click on the time and reset it. (I also added a font= parameter but anything that's not a monospace will wiggle a bit as the centered text changes width during the countdown)

Nice to have the mojo to be able to say "I got you fam, gimme ten minutes" though it was more like half an hour. It's not lovely code. Some small tricks used include this quick and dirty vertical centering and use of "vw" CSS units so that the display was scaled to the screen (I had to set the block's height to 1em for the vertical centering to work)

No comments:

Post a Comment