html, body {
display: grid;
justify-content: center;
align-content: center;
height: 100%;
font-family: sans-serif;
font-size: 1.1rem;
}
const canadaDay = new Date('July 1, 2020')
const now = new Date()
// convert milliseconds to days
// since we want whole days Math.floor is used to drop extra time
function msToDays (date) {
return Math.floor(date.getTime() / 1000 / 60 / 60 / 24)
}
// Calculating difference
const difference = msToDays(canadaDay) - msToDays(now)
if (difference > 0) {
document.write(`There are ${difference} day(s) until Canada Day`)
} else if (difference < 0) {
document.write(`Canada day was ${Math.abs(difference)} day(s) ago`)
} else {
document.write(`It's Canada Day!`)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.