In my last post, I showed you how to get today's date in vanilla JS. I also said I'd show you how to get the number of days between today and a date in the future. So let's create a simple Christmas countdown!
The HTML
First, the markup. Nothing too fancy here—just a heading and an empty <div> element. We'll use JavaScript to inject the number of days into the <div> element.
<h1>Days until Christmas</h1>
<div id="days"></div>The CSS
Next, the styles. Nothing extraordinary here either. This is just a centered page with:
- a dark red background
- white text
- a festive font for the heading
I'm not much of a designer—sorry!
* {
box-sizing: border-box;
}
body {
width: 90%;
max-width: 40em;
margin: 1em auto;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
background: darkred;
color: white;
}
h1 {
font: 700 4em/1.25 'Mountains of Christmas', cursive;
}
#days {
font-size: 3em;
}The JavaScript
Now for the actual countdown!
Get the dates in milliseconds
We need to get Christmas and today's date, so we construct two Date objects to represent them. For today's date, we use the helper function from last week.
// Get Christmas and today's date in milliseconds
const christmas = new Date('2021-12-25').getTime();
const today = getTodaysDate().getTime();The easiest way to deal with dates is to compare the values in milliseconds and convert to the desired unit afterwards. So for each of our Date objects, we call the getTime() method. This returns the number of milliseconds since the Unix Epoch, relative to the date. We store the millisecond values in the christmas and today constants.
Get the difference and convert to days
Next, we get the difference between the two dates, and convert to days.
// Get the difference between the two and convert to days
const diff = christmas - today;
const numDays = diff / 1000 / 60 / 60 / 24;First, we subtract the value of today from the value of christmas and store the result in the diff constant.
Then we convert to days...
- there are 1000 milliseconds in a second, so we divide by 1000 to get the value in seconds
- there are 60 seconds in a minute, so we divide by 60 to get the value in minutes
- there are 60 minutes in an hour, so we divide by 60 again to get the value in hours
- there are 24 hours in a day, so we divide by 24 to get the value in days
...and store the result in the numDays constant.
Update the page
Finally, we show the number of days on the page!
// Get the #days element
const days = document.querySelector('#days');
// Update the #days element
let message;
if (numDays > 0) {
message = `${numDays.toString(10)} day${numDays > 1 ? 's' : ''} to go!`;
} else {
message = 'Merry Christmas!';
}
days.textContent = message;First, we select the <div> element and store it in the days constant.
Then we declare a variable called message, but we don't initialise it with a value yet. We use a conditional statement to decide what the value should be.
If there are still days remaining, we use the string "X day(s) to go!" where X is the number of days. We use the ternary operator to work out whether we should say "day" or "days", singular or plural.
If there are no days remaining, we use the string "Merry Christmas!"
Finally, we set the value of the <div> element's textContent property to the value of our message string, which adds the message to the page.
We haven't added any code to make the page update automatically, but I don't think it's necessary. Since we're only dealing with days, it seems sensible to just refresh the page once a day.