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
 
sambenskin profile image
Sam Benskin

Great post, thanks for sharing.

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

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
 
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
 
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
 
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.