I can be quite bad at tracking and keeping time, so over time I’ve learned to use timers and alarms to get by. Without any alarms or set notifications, I will tend to not focus on the primary task and constantly check how long until event xyz or simply forget it completely.
For some time I was looking for an ideal and ready software solution, but didn’t end up finding one that suited my needs & wants perfectly.
Some options I looked at:
| App | Pros | Cons |
|---|---|---|
| Android timer app | - Can add multiple timers | - Setting timer duration is done by writing two number digits that will overflow to the longer duration unit (“100” overflows from seconds to minutes and equals 1 minute) - Cannot see all timers at once - Reliability: I’ve had the alarm app not notify me |
| iOS clock app | - Very simple interface for timers: set hours, minutes & seconds independently | - Can’t add multiple timers - Cannot write a note about timer |
| timer-tab.com | - Clear interface for starting timers & alarms | - No note field |
| Time and Date timer | - Simple interface for adding timers - Can add multiple timers |
- Possibly too many clicks (Edit -> Change duration fields, name, notification at the end of alarm) -> Done -> Start - No alarm functionality |
Most of these and other applications have a clear distinction between alarms and timers. Timers are one time notifications that happen x amount of time from now. Alarms are saved recurring notifications at a specific time and can be enabled and disabled for specific days. I wanted something with a combination of alarms and timers where adding either one is easy and both have smooth workflow.
Solution: I’ll just make my own.
Specification and design
Features
- Required
- Multiple platform support (Windows, macOS, Linux): web based
- Set timer for specific time
- Set alarm at specific time
- Show remaining time
- Small note about what the timer or alarm is about
- Start short timer (5, 10, 15, 30 etc. minutes) instantly
- Notify user visually and with audio
- Nice to have
- Show current progress from start to end of the timer
- Disable sound on alarm
- Adjust alarm volume
- Adjust current alarm or timer duration
- Not needed
- Preset techniques or methods (Pomodoro etc.)
Implementation
The technical implementation is a single HTML file with CSS for styling and plain JavaScript for logic and DOM manipulation. The timers are handled with Date objects so they will still work when waking the computer from sleep. Audible alarms are done with oscillating sound with AudioContext and the volume & enabled status can be changed in the GUI.
The type of timer is determined automatically from which fields has the user input data and null values default to 0. If the user wants a 1 hour timer, they only need to input 1 into the timer hour field and press start.
Layout
The duration, main action buttons and note are displayed near the top of the page to be able to still see them when the browser window is set a small size.
Future features & improvements
- Improve visual look and style
- Keyboard hotkey support
- Store preferences to LocalStorage or to query parameters
- Add multiple alarms and timers. Current solution is to open another instance in a separate browser tab.
- Responsive support. Current usecase is on a desktop OS and I’m not 100% sure about mobile OS browser being able to run for long periods of time without OS process manager stopping it at some point.
- Ability to select day for the alarm
Can I get it & try it out?
Not yet, but soon. I’ll be releasing the timer app with a bunch of other similar small utility applications.