CODING, SMART HOME

Create a countdown in HTML

Isn’t there always some countdown. 84 days until the birthday. Two days until Christmas. 219 days until the new season of “Stranger Things”. There are lots and lots of countdowns here: https://yourcountdown.to/

I wanted to add a countdown for New Year’s Eve to our smart home system.

For that I only had to throw a bit of code onto a small subdomain and I could already display the subdomain in my smart home view.

Here is the code:

<!DOCTYPE html>
<html>
   <head>
      <title>Countdown</title>
   </head>

<body>
<font face="Arial" font-style = "sans-serif" font size="5" color="black">
<h3><a>New Year’s Eve countdown: </a>
      <a id="demo"></a>

// Enter the end date and time here
var countDownDate = new Date("Jan 1, 2021 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// The result of the calculation is displayed here with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

// Change the text that is shown when the countdown has expired here
  if (distance < 0) {clearInterval(x);
    document.getElementById("demo").innerHTML = "HAPPY NEW YEAR!!!!";
  }}, 1000);
</script></h3>
</font>
</body>
</html>

(Code may not be displayed on mobile)

You can of course adapt the code to your own needs. Change the font, the color of the letters or add a background.
Happy coding!

Stay safe - stay healthy - learn something new every day!!