My next project was to try and add in progress bars. Once the session timer is complete, then that div hides and the break div shows and the break timer starts. Once you’ve made your selections, you click the start button and the session timer starts. My structure mimics the Geoff’s demo, with two variables - one for break time and one for session time - that you can modify using plus and minus buttons. Using Jason’s plugin, I was able to get a basic timer working fairly quickly. So I kept looking until I ran across Jason Chavannes’ jQuery Timer, which had everything I wanted, including good demos and documentation. It has a lot of the functionality I wanted but didn’t have the built in ability to pause and restart the timers. I experimented with jQuery Simple Timer by Carlous Souza. There’s no shortage of timer plugins for jQuery, but I was able to sift through them fairly easily, eschewing anything that was pre-styled. I needed something that would let me easily build a timer. Naturally, I started with basic functionality.
Aesthetic work timer trial#
My first trial was to find some frameworks that would allow me to do what I wanted. With those two things in the back of my mind, I resolved to start from the beginning and just get something working. I also really liked the idea of shaping the progress bar like a tomato. On the aesthetic side, I really liked the idea of filling up the circle as time passed in the reference pen, but I wanted to add on to that idea by creating little progress bars for each session. They should also be able to pause the timer and restart it. Particularly this offering by NASA Trained Monkeys.Įssential functionality was to allow users to set both the session and break time and start the timer. I took my inspiration both from the Geoff’s demo and from the pomodoro apps in the iOS App Store. Pomodoro App by NASA Trained Monkeys My Idea