Day 175 – 182 Finished FCC Advanced Front End Project – Pomodoro Timer

In this new sprint for the FCC advanced front end project, I spent a week and finished building a Pomodoro timer. I felt really proud of myself!

 

Screenshot 2017-10-15 at 7.08.22 PM

Again, I found using the sprint methodology to — 1) break down the main project into small, achievable actions; 2) quantify these actions as a “1”, “3”, or “5”; 3) schedule daily “sprint” meetings in the mornings with myself, asking myself what I have done the day before, what I will day today, and what stands in the way for achieving my goal really helped me on track, and code this project efficiently.

The main challenge of this project is to allow the users to define their own time duration (by default, the pomodoro mode will be set as 25 min, and the break mode as 5 min), and by clicking on a “start”, “pause”, or “reset” button, be able to start, pause, or reset the timer.

I learned how to set up the “setinverval” function through googling, and was able to learn how to start a timer with a preset time duration fairly quickly. However, when I was trying to refine the design of the timer, especially allowing the time duration to be correct as the users toggle between different buttons within the pomodoro or break setting, or even between the two settings as the timer is still running, it took me a while to figure out the right variables to define.

These posts especially helped me during my research process —

  1. how to use the “setInverval” function to run the timer function every second. 
  2. this post inspired me to set a “state” variable to define the “state” of the timer, whether “break” or “pomodoro” depending on the buttons clicked; and also to create the pause functio. 
  3. this post led me to create a sound of warning when the timer is up. 

Overall, this project especially pushed me to think through what function needs to be incorporated as users may click on each, or any button when a certain function is running, or not running.

You can view my complete project on CodePen here. I feel confident that I’m back on track, and look forward to using the “personal” sprint method to finish my next frond end project. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s