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!`)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.