Making a javascript countdown timer

Question

I am making a countdown timer where the text for Days Hours Minutes Seconds is just below to their respective values. Also it must be responsive too. I have some code below:

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

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays 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("timer").innerHTML = "<h1>" + days + " <span> days </span>: " + hours + "    <span>hours</span>: " + minutes + " <span>minutes </span>: <font color='red'>" + seconds + "<span> s</span></font> </h1>";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);

    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

<div align="center" id="timer"></div>

My code has a problem in the case that the day symbol D is on left of the Day value but I want it to be on right. I mean just like picture below

Are you just asking how to position the text below the numbers, as in the screenshot? There's nothing wrong with the countdown code itself? — Daniel Beck
– Daniel Beck, Commented May 1, 2019 at 14:01
I don't see any D symbol in the picture you posted. I don't understand what you're asking. — melpomene
– melpomene, Commented May 1, 2019 at 14:02
So write HTML without the JavaScript that does what you want and than put it into the JavaScript code.... — epascarello
– epascarello, Commented May 1, 2019 at 14:02

Maheer Ali · Accepted Answer · 2019-05-01 14:04:51Z

You can wrap the text in <div> to create a line break. Secondly create a function which takes text,value and color as parameter and return html string.

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

function timePart(val,text,color="black"){
  return `<h1 class="timer" style="color:${color};">${val}<div>${text}</div></h1>`
}

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays 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"

 let res = timePart(days,'days') + timePart(hours,'hours') + timePart(minutes,'Mins')  + timePart(seconds,'Seconds','red');
document.getElementById("timer").innerHTML = res

  // If the count down is finished, write some text 
 if (distance < 0) {
    clearInterval(x);

document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

.timer{
  display:inline-block;
  padding:10px;
}

<div align="center" id="timer"></div>

Conrad Reeves · Accepted Answer · 2019-05-01 14:07:29Z

0

Okay so I fixed it according to your requirements. It's not exactly like the picture but I'm sure you can do a little bit of styling. Here is the snippet in action.

var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays 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("dd").innerHTML = days
  document.getElementById("hh").innerHTML = hours
  document.getElementById("mm").innerHTML = minutes
  document.getElementById("ss").innerHTML = seconds

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);

    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

h1 span {
  margin: 0px 10px;
}

p span {
  margin: 0px 11px;
}

<div align="center">
  <h1>
    <span id="dd"></span>:
    <span id="hh"></span>:
    <span id="mm"></span>:
    <span style="color:red;" id="ss"></span>
  </h1>
  <p>
    <span>Days</span>
    <span>Hours</span>
    <span>Minutes</span>
    <span>Seconds</span>
  </p>
</div>

edited May 1, 2019 at 14:07

answered May 1, 2019 at 13:59

Conrad Reeves

782 silver badges10 bronze badges

2 Comments

Niyoj oli Over a year ago

Yes its working but I want the text likes D M H and S be below the respective value of Day Hour Month and Time as in my picture posted.

Conrad Reeves Over a year ago

Here you go. I (almost) fixed it!

Collectives™ on Stack Overflow

Making a javascript countdown timer

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related