CODEWITHSUNDEEP
javascripttimer
carlozsan
carlozsan

Reputation: 135

how to set display on countdown timer (javascript)

I used the snippet below to create a countdown timer.

<script>
  // Set the date we're counting down to
  var countDownDate = new Date("Jan 5, 2024 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);

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

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


  }, 1000);
</script>

How do I set the output (display) like so:

  1. If the remaining time is still above 1 month, then display only the month.

  2. If the remaining time is under 1 month, then display only days,

  3. If the remaining time is below 24 hours, display the hours and minutes

  4. If the remaining time is below 1 hour, display the minutes and seconds.

Thanks

Upvotes: 0

Views: 491

Answers (1)

DucksEatTurtles
DucksEatTurtles

Reputation: 384

first add a calculation for number of months left then add a function that limits the times like so

const displayRemaining = () => {
    if (/* there are months remaining */) return months + " months";
    if (/* there are days remaining */) return days + " days";
    if (/* there are hours remaining */) return hours + " hours";
    if (/* there are days remaining */) return minutes + ":" + seconds + " m:s";
    return "you have gone back in time or smth idk";
}

Upvotes: -1

Related Questions