Organization and keeping track of time is a passion of mine. Pomodoro is a time tracking app that leverages the pomodoro technique of working in 25 minute intervals with 5 minute breaks. The app provides users with a timer as well as an area to list and complete tasks. It was designed using Sketch and built with Angular JS.
Develop a site with AngularJS that allows users to list out tasks and use a timer that is aligned with the pomodoro technique.
1. As a user, I want to start and reset a 25-minute work session
2. As a user, I want to start and reset a 5-minute break after each completed work session
3. As a user, I want to start and reset a longer, 30-minute break after every four completed work sessions
4. As a user, I want to see a live time during work sessions and breaks
5. As a user I want to record completed tasks
This was my second app developed with AngularJS. It has a steep learning curve but it was fun and valuable to hone my skills while working on a project. Since this was more of a minimalistic site, I concentrated on completing the user stories before layering on design.
I started by creating the time controller and focusing on how to start or reset the timer from the view. I implemented two buttons with the ngClick directive to trigger a custom function that starts or resets the timer. One button handles work sessions and another to handle breaks. Then I used markup to handle the button text, i.e., "Start a Work Session", "Reset Work Session", "Start Your Break!". To handle the timer's functionality, I created a custom directive and injected Angular's $interval service.
I created a boolean variable, onBreak, that initially has a value of false in order to control the state of the timer. When the timer reaches the end of a work session or break, the value of this boolean changes. I used the ngShow directive to determine what the user sees in the view: either the button that controls work sessions or the button that controls breaks.
When the timer reaches the end of a work session, assign the timer the length value associated with a five-minute break. The user will see this new time in the timer, and the ngShow or ngHide directive used on the buttons will pair the correct button to the timer's state.
I used constants for the static intervals associated with each work session and break, and injected them as a dependency.
I created a variable that holds the number of completed work sessions. It's count increments after each completed work session. When the timer reaches the end of a work session, instead of directly assigning the new timer length, a conditional statement checks whether the number of completed work sessions is equal to four. If it is, then update the timer to show thirty minutes. If the count does not equal four, then update the timer to show a regular, five-minute break. Once the count of the number of completed work sessions reaches four, reset it back to zero.
Finally, I used firebase to store a collection of tasks and a control that allows users to add tasks to a list.
To brand my site, I leveraged a tomato to represent the Pomodoro technique. I found an image that include a red and green color and used those colors to represent work sessions and breaks, respectively.
For styling, I tried angular material design because most of my projects to this point were completed with Bootstrap. Material was easy to implement and I was able to use a slide in sidebar for the task list. I went through a few iterations on the timer page before landing on the final design. Ultimately, I wanted to help users focus on the task at hand and only show the timer and it's controls by default. Once the user is done with a task, they can open the sidebar, check it off of the list, and see what other remaining tasks they have.
Challenges and Next Steps
The biggest challenge I faced developing with AngularJS was understanding scope and concepts such as dependency injection. Overall, I had a lot of fun with this project. When I built this, I intended on layering on a metrics area where users could see how much time they spent on certain tasks and use that to better plan their days. Since, I've started to learn React.js and I'm currently working on site that accomplished these goals. That is coming soon!