One of the Free Code Camp projects is to make a pomodoro clock. I guess this is  a preparation towards that one. A very basic javascript countdown. I want to be able to set the time, and start it. That’s it for now.

I found this the other day, from sitepoint. It’s a more complicated timer. I liked it a lot because he really explains what is going on. I haven’t looked at it while I’ve been coding my own countdown. But some of it was, of course, fresh in my memory.

Prepare

I used a template from initializr.

I had an intensive thought process.

I glanced at this page on Mozilla Developer Network for quite some time. It is the  WindowTimers.setInterval() page.

Plan

HTML with a headline, a div for the countdown. A button to start, and an input for the number I want to count down from.

Then I’m making a countdown function. This function takes one argument, the number to count down from.

How do I even decrement the given count argument inside the function?

I’m guessing I have to use setInterval. Though I’m not yet sure how I do that.

The countdown has to stop at some point. Preferably when it hits zero. Will this be a separate function?

Lastly I’ll give it some awesome styling.

Perform

The HTML was easy enough. An other page with minimal markup.

I actually ended up with only one function. I grabbed the input element and the div where I show the count down.

I set the setInterval function to a variable, and made an if statement to stop it when it reached zero. To do this i used clearInterval on the variable. Can’t really explain the mechanics behind it, but thats what worked in the end (after some of tries).

I kept the styling simple. A border radius of 50% with equal width and height, gave it a nice circle look.

And that’s it. A really simple javascript countdown.

javascript countdown

Perfect

I wanted a digital like font on the count down, so I had to download a font. Found this guide on @font-face form CSS-tricks.

And I found this tutorial on setInterval, from javascript.info,  which gave som extended understanding.

 

To the project!