Create Countdown in using HTML, CSS & JS.

August 29, 2021

Learn to create a countdown / timer in your website using HTML, CSS & Javascript Easily within some minutes.

Code

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
  // Set the date we're counting down to
  var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime()

  // Update the count down every 1 second
  var x = setInterval(function () {
    // Get today's date and time
    var now = new Date().getTime()

    // Find the distance between now and the count down date
    var distance = countDownDate - now

    // Time calculations for days, hours, minutes and seconds
    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)

    // Display the result in the element with id="demo"
    document.getElementById("demo").innerHTML =
      days + "d " + hours + "h " + minutes + "m " + seconds + "s "

    // If the count down is finished, write some text
    if (distance < 0) {
      clearInterval(x)
      document.getElementById("demo").innerHTML = "EXPIRED"
    }
  }, 1000)
</script>

And then your countdown is created.


Image of Preet Suthar

Written by Preet Suthar Learning and trying to make somthing better then before. You should follow them on Twitter