Custom "Daily Dreams" CountUp Widget

Hi there,

Wondering how I could make a custom "CountUp" widget for my website.

The idea behind the site is that my friend is documenting 10,000 people's dreams over 10,000 days and I would like to create a live counter that ideally counts up 1 digit each day from NOW.

Is there any way to do this for free? Thanks!

(Would replace the countDOWN in the screenshot)

https://echidna-echidna-dlzc.squarespace.com/
 

Edit page where you want to place this countup > Add a Code Block > paste this code

<div id="timer"></div>
<style>
  #timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
}
#timer div {
  display: inline-block;
  min-width: 90px;
}
#timer div span {
  color: #B1CDF1;
  display: block;
  font-size: 0.35em;
  font-weight: 400;
}

</style>
<script>
  function updateTimer() {
  future  = Date.parse("June 11, 2020 11:30:00");
  now     = new Date();
  diff    = future - now;

  days  = Math.floor( diff / (1000*60*60*24) );
  hours = Math.floor( diff / (1000*60*60) );
  mins  = Math.floor( diff / (1000*60) );
  secs  = Math.floor( diff / 1000 );

  d = days;
  h = hours - days  * 24;
  m = mins  - hours * 60;
  s = secs  - mins  * 60;

  document.getElementById("timer")
    .innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>' ;
}
setInterval('updateTimer()', 1000 );

</script>