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