DEV Community

Building a Pomodoro Timer with Vue.js on CodePen

Tori Pugh on May 31, 2018

I've been following the challenges on Scotch.io for awhile and saw one that I was really interesting in trying to make. It was a Pomodoro timer for...
Collapse
 
willamesoares profile image
Will Soares •

Hey Tori. Great post! I loved the way you described the steps for achieving the final implementation, you explained it in a clear and simple way :)

Just a tiny detail that I noticed in your code was that you are not really clearing the interval when you click the reset button. That results in a weird interval between the seconds. Try to click the reset button then start the countdown again.

One way to solve that is to in fact clear the interval within the timerReset function.
Instead of
clearInterval( () => { this.interval; });
you should have
clearInterval(this.interval);

What do you think?

Collapse
 
teekatwo profile image
Tori Pugh •

Hmm... I'll look into it because that's what I wanted to do (what you said). So if it's not doing that I'm unsure. Otherwise it get incrementally faster and that's now what we want at all. Thanks for pointing it out.

Collapse
 
ben profile image
Ben Halpern •

Thanks for the post Tori! After seeing you talk at CodeLand I feel like I'm reading it in your presentation style. Very clearly describe 👌

Collapse
 
teekatwo profile image
Tori Pugh •

Thanks, I'm not sure if that is a good thing or a bad thing. I need to work on relaxing more when I present. 😌 But I want to be as descriptive as possible so I'm glad that came through.

Collapse
 
ben profile image
Ben Halpern •

Good thing! I thought your presentation I saw was clear and memorable. Everybody has a bit they need to work on but I really loved seeing you talk.

Collapse
 
lepinekong profile image
lepinekong •

Hi, I clicked on play it doesn't countdown ?

Collapse
 
teekatwo profile image
Tori Pugh •

Did you click on the first codepen at the top? That one is just a layout they made so you could start on the coding mechanics. It does not work, the working one is at the very bottom.

Collapse
 
lepinekong profile image
lepinekong •

OK thanks, I used first one :)

Collapse
 
lepinekong profile image
lepinekong •

By the way was interested by your pomodoro as I also made one in red ;) myminiapps.space/countdown/

Collapse
 
theodesp profile image
Theofanis Despoudis •

Hey, there is an issue with your timer. If you quickly click on start, reset, start reset about 5 or six times then the last time the timer will go nuts and almost countdown at triple speed

Collapse
 
teekatwo profile image
Tori Pugh •

Interesting, odd usage (wildly clicking buttons) but I'm game to figuring this out. Sounds like maybe a reset button problem.

Collapse
 
theodesp profile image
Theofanis Despoudis •

Finding use and abuse cases are part of the game

Collapse
 
theminshew profile image
Michael Minshew •

Love this, been needing a good linux timerfor countdown and countup. Was in the same place lol. How the heck do I start. This is exactly what I needed. Thanks!

Collapse
 
teekatwo profile image
Tori Pugh •

No problem. I didn't understand how complex a timer/countdown could be.

Collapse
 
scooterphoenix profile image
Scooter Phoenix •

Great post, Tori & great break down of your project. We did this in class this week and it’s empowering to read & understanding what you did in your code. Great job all the way around!

Collapse
 
sambenskin profile image
Sam Benskin •

Great post, thanks for sharing.

There's a lot of interesting parts to something that sounds very simple.

Collapse
 
fransuaio profile image
Francisco Suárez •

This don't work in main codepen link

Collapse
 
teekatwo profile image
Tori Pugh •

You mean the first pen?

Collapse
 
fransuaio profile image
Francisco Suárez •

My bad... sorry it's work fine, you did this template to begin the tutorial

Collapse
 
fbmstatic profile image
FBM Static •

No tests?

Collapse
 
teekatwo profile image
Tori Pugh •

Never done them. I'm self taught and that's a section I haven't gotten to yet. I feel it would be easy to be taught later. If you've got some insight do let me know, I'm quite curious.