Question 45387 in Html Question posted in
Some basic documentation can be found here.

Create a countdown time like the shown below – Html

I am trying to create a countdown timer like in the image but I am not able to do it correctly. Could you please help me create this timer please?

Timer

I tried to create the timer but couldn’t. I am not able to add the labels like Days, Hourse, Minutes, and seconds in the code outside of the black background so it looks like the above image. here is the code I created:

// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").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);

  // Add leading zeros to values less than 10
  days = days.toString().padStart(2, "0");
  hours = hours.toString().padStart(2, "0");
  minutes = minutes.toString().padStart(2, "0");
  seconds = seconds.toString().padStart(2, "0");

  // Display the result in the element with id="demo"
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdownText").innerHTML = "EXPIRED";
  } else {
    document.getElementById("countdownText").innerHTML = "";
  }
}, 1000);
<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
  </div>
  <div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
  </div>
</div>
<div style="color: black; font-weight: bold; text-align: center; margin-left: -650px;">
  <span id="countdownText"></span>
</div>
Tags:

2

Answers


  1. 0

    This piece of your code could look like this:

        days = days.toString().padStart(1, "0");

    Your complete code is on CodeSandbox:
    https://codesandbox.io/s/reverent-pond-c9m38x?file=/index.html

    Hope this helps you.

    Login or Signup to reply.
  2. 0

    I did some modification to your code and also added colon between div as per design you gave.

    // Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").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);

  // Add leading zeros to values less than 10
  days = days.toString().padStart(2, "0");
  hours = hours.toString().padStart(2, "0");
  minutes = minutes.toString().padStart(2, "0");
  seconds = seconds.toString().padStart(2, "0");

  // Display the result in the element with id="demo"
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdownText").innerHTML = "EXPIRED";
  } else {
    document.getElementById("countdownText").innerHTML = "<h2 style='margin:0px 25px;'>days</h2><h2 style='margin:0px 25px;'>hours</h2><h2 style='margin:0px 20px;'>minutes</h2><h2 style='margin:0px 20px;'>seconds</h2>";
  }
}, 1000);
    <div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
  <div style="display: inline-block; background-color: brown; padding: 10px;  border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
  </div>
  <span style="color:white;  font-size:4rem;">:</span>
  <div style="display: inline-block; background-color: brown; padding: 10px;  border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
  </div>
   <span style="color:white;  font-size:4rem;">:</span>
  <div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
  </div>
   <span style="color:white;  font-size:4rem;">:</span>
  <div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
    <div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
  </div>
</div>
 <span style="color:white;  font-size:4rem;">:</span>
<div style="color: black; font-weight: bold; text-align: center; border:2px solid yellow">
  <span id="countdownText" style="display:flex; gap:5; color:black">
  </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search