Sometimes we need an egg timer for our lives, like when we spend HOURS sitting at a desk. I’ve written a little script that lets you set an alarm for yourself – to remind yourself to get up and stretch? Eat? Blink?
This project provided opportunities to make a sexy user experience, like preventing the “minus” sign from appearing if you count down to 1 (to prevent negative numbers from being possible… otherwise we’d be setting an alarm for a point in time that has already passed, no?).
Another bit of UX: the text in parenthesis disappearing when you run the timer. You only need to read that once, then it can go away.
The flashing green bar indicates how many seconds remain per minute. It’s 60 pixels wide, so I remove a pixel with each passing second. This wasn’t terribly obvious at first, so I also made the seconds countdown toggle between a lighter “limegreen” and just normal “green” css values. This gives the impression that it’s flashing. The dark grey background makes the colours feel like they’re lights on a digital display, which makes the whole application seem sleeker somehow. I don’t know how or why, but it looks cool that way.
If you’ve already started the countdown but don’t want to wait the full 25 minutes to hear the alarm, just click the minus sign furiously until you’re down to 1 minute.