Pomodoro Timer Retrospective


The pomodoro timer project is a timer that users can use to be more productive in their work. This was a very challenging project for me at the time, but finishing it was very satisfying.

I themed it with my favorite movie series ever, Star Wars! I had to search high and low on the web to find something that looked approximately like the surface of the Death Star for the background texture.

Code Review

Looking at the HTML, I used was starting to use a lot more Bootstrap classes and really starting to understand it a little bit better. I used more responsive columns and this is the first app where they actually change the structure of the app when going down mobile. The Republic and Empire logos get stacked as you move down to smaller sizes. I was also using things like btn btn-primary. I remember fighting a lot with center-block and text-center trying to center blocks of content. I also used Google Fonts again to import something that looked kind of like a font the Galactic Empire might use.

There are a lot of button click handlers at the bottom of the index.html page in a script tag. I'd prefer that those were in the js file.

The JavaScript is surprisingly clean despite evidence that I struggled for the first time with time in JavaScript. It could definitely use some cleanup and refactoring, but the JavaScript that is there makes sense. I used audio for the first time in this app. When the work timer is over, a lightsaber turning on sound is played. Everytime I use this timer, that lightsaber sounds scares the hell outta me.

Future Improvements

I really like this application. It will be included in my Angular rewrite list and I'll use it to help learn testing and Jasmine with an Angular app. I might change a few things when I rewrite this:

  • Figure out a way to turn down the volume on that damn lightsaber sound or replace it with something less jarring.
  • I'd get rid of jQuery entirely and just use Angular
  • I'd get rid of Bootstrap. I think this app would look great using Material.