A few pieces of information about this timer:
- When the countdown timer reaches Christmas day, the intervals will all stay at 0 for the day. i.e. There won’t be any ugly-looking minus characters.
- When the 26th of December is reached, the timer will automatically begin to count down to next year’s Christmas day. i.e. On the 26th of December, 2019, it will begin to count down to the 25th of December, 2020.
Here is the HTML for the timer:
<div id="countdown"> <h1>Countdown until Christmas Day.</h1> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div>
As you can see, I have kept the HTML above as basic as possible. Feel free to add your own CSS styling or change the div elements to span elements.
- We created a function called calculateChristmasCountdown. It is this function that does all of the work.
- When you first load the page, you need to call the calculateChristmasCountdown function once in order to start the timer.
- Once the function has been called, it will use the setTimeout() method to recursively call itself every second.
- If you want to modify the code and calculate the number of weeks or months, then you will need to do this BEFORE the days, hours, minutes and seconds are calculated.