tomato-timer

The classic tomato timer, a Pomodoro Technique. This was a fun mini project that introduced me to the setInterval functionality.

I use the tomato timer daily to assist in staying focused and to take quick breaks to stretch the legs and help reset the mind. It helps to break up the day, and tackle bigger projects.

I was inspired to build an app similar to the website; Tomato-Timer.com!

Table of Contents

• Overview
  • App Breakdown
  • Screenshot
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources

Overview

App Breakdown

This application is a countdown timer that assists those using the Pomodoro Technique.

The app gives you the choice to set the timer to either 25 minutes, or a series of breaks, 10 minutes for a long break, or 5 minutes for a short break.

You can also stop the timer at anytime, re-start the timer, or reset the timer to begin the countdown again.

Screenshot

Links

• Live View
• Github Repository
• Website

My Process

Built With

• Javascript ES6
• HTML5
• CSS3
• Adobe XD
• Mobile First Design
• Webkit

What I Learned

• JS Timer Functionality
• Webkit
• setInterval() caused the most issues for me:
  • I came across an issue when I wanted to use setInterval in multiple functions. This caused a few issues. Each time setInterval was called, it would multiply in speed by the number of times it was called.
  • For example, clicking 'start' when the timer was already counting down, would accelerate the countdown, it would increase in speed with each click, 'stop' would no longer work even with calling clearInterval, and reset would work, but the countdown would still be just as fast.
  • I figured how best to call setInterval, I removed the global setInterval, added it into the 'start' eventListener.
  • This allowed the stop eventListener to function correctly, however it did not fix the acceleration issue.
  • By adding a simply 'on' / 'off' switch of sorts, I was able to fix the problem.
• clearInterval()
  • I was able to use clearInterval() to pause the timer when the 'stop' eventListener was called.
• ${}
• I am currently experience an issue with what I see using

Continued Development

• I would like to come back to this project and add sound (an alarm) for when the timer hits 00:00. Updated 1/22.

• I would like to update the document title in the browser tab to update and reflect the timer countdown. Updated 12.19.21.

• I find that when changing the time of the counter, it seems to JUMP over the first sec iteration. I would like to fix that. Using setTimeout did not seem to do what I wanted.

• I would also like to practice a bit on my CSS skills, and make the clock look more like a retro 90's alarm clock! As well as bring the design to a more modern look.

• Horizontal orientation of mobile view needs to be fixed. Updated 12.18.21.

• On mobile, buttons become sticky when 'hovered', and don't return to their normal state. Would like to fix.

• I would like to add the ability for the user to customize their break times.

Useful Resources

• CSS Animations
• Query Selector
• JS Timer
• setTimeout()
• setTimeout()
• clearInterval()
• sticky hover effects

Author

• John M Darrin - Portfolio
• Reference: tomatoTimer.com