See it live at: https://thinkerdreamer.github.io/TimeSense-Timer/
- auto show/hide title, inputs, and buttons while timer is running
- add feature to share timers
I created this elegant visual timer to help myself and other people like me who struggle with time blindness visualize exactly how much of the allotted time has passed and how much is remaining.
Before starting this project, I looked for Android and web apps for visual timers and couldn't find any that were attractive and exactly what I was looking for, so I created my own.
I originally wrote it in vanilla JavaScript, taking reference from from Mateusz Rybczonek's Animated Countdown Timer, but I added many of my own touches to the timer's interface, such as:
- blinking numbers while paused
- buttons which hide while the timer is in use (original vanilla JS version only, still to be added to React version)
- a pop-out button to create a mini-version of the timer
I also crafted the styling to make it responsive for all screen sizes.
I later ported it to React as practice while learning the framework, though now (Jan 2025) after a few years of professional software engineering experience under my belt, I feel it could have stayed in, well, not JavaScript, but TypeScript, without the added complexity of React, which adds little benefit in this case.