Develop Reference

Create a countdown time like the shown below

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?
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>

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.

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>

Preventing CSS animation from restarting each time JS setInterval runs

I'm trying to add an intro animation to a timer using JS, but it seems to restart each time the function with a setinterval runs. The function updates the timer every second. This is my script:
function updateTimer(){
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
The script will show timer on the following HTML code:
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>
And the animation that im trying to apply has the following keyframes:
#keyframes timerSlideUp{
0%{
opacity: 0%; animation-delay: 5s;
}
100%{
opacity: 100%;
}
}
With the decorative CSS:
#timer{
color: white;
padding: 20px;
text-align: center;
}
#timer div{
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
animation: timerSlideUp 5s forwards;
}
I haven't tried anything because I don't know at all how I could get around or fix this.
I'm trying to make the timer to fade in and stay in place (thus the "forwards" in the "animation" property). I'm planning to also add other animations in the future, so these restarts make it impossible.
Thanks in advance!

Move the animation up into the parent element and set animation-iteration-count to 1
I set a background: blue on the body as the white color didn't show anything when running the snippet
function updateTimer() {
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
body {
background: blue;
}
#keyframes timerSlideUp {
0% {
opacity: 0%;
animation-delay: 5s;
}
100% {
opacity: 100%;
}
}
#timer {
color: white;
padding: 20px;
text-align: center;
animation: timerSlideUp 5s forwards 1;
}
#timer div {
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
}
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>

Countdown CSS visual formatting

I am trying to match the format in the image below.
Here is the code I have now: https://codepen.io/Brite1/pen/wvPrggj (looks like I just need to add spacing and center all numbers/text). I am not sure how to add spacing and how to center all text and numbers correctly. Please help, thanks!
body {
align-items: center;
background-color: transparent;
display: flex;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time{
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font{
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}

Use a wrapper and remove flex from the body. After removing the flex property from body add it in the wrapper and then use text-align to center the text.
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour, 0, 0, 0);
return resultDate;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// 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 an 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)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: transparent;
}
.wrapper {
display: flex;
gap: 10%;
align-items: center;
justify-content: center;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
span {
text-align: center;
}
<div class="wrapper">
<span style="margin-right: 20px;">
<span id="circle-days" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-hours" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-minutes" class="circle-time"></span>
</span>
<span id="circle-seconds" class="circle-time"></span> <span id="timer"></span>
</div>

You can use a flex container, and set the elements to be the same size with flex: 1 0 150px, which reads flex-grow: 1, flex-shrink: 0, flex-basis: 150px. You can use the width of your liking, but you'll get the idea.
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour, 0, 0, 0);
return resultDate;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// 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 an 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)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
body {
align-items: center;
background-color: transparent;
display: flex;
}
.flex-wrapper {
display: flex;
min-width: 600px;
}
.flex-wrapper>span {
flex: 1 0 150px;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
<div class="flex-wrapper">
<span id="circle-days" class="circle-time">00</span>
<span id="circle-hours" class="circle-time">00</span>
<span id="circle-minutes" class="circle-time">00</span>
<span id="circle-seconds" class="circle-time">00</span>
<span id="timer"></span>
</div>
See live example here.

Make my clock animation fire one second/minute early

I'm trying to get my minute number and hour number animation fire one second early. As you will see, the animation currently occurs when the seconds roll off '00', I'd like the animation's to occur when the seconds roll off '59'.
I've tried altering the seconds to display one second faster to correct this useing.
date.setSeconds(date.getSeconds + 1)
But the number goes crazy. I'm converting the timer numbers to background positions, which is probably lazy, but it seems a simple answer if I can get it to work properly. Any ideas would be greatly appreciated. Working demo can be found here. Clock
<script>
setInterval(function() {
var date = new Date();
var hours = date.getHours() * 100;
var minutes = date.getMinutes() * 100;
var seconds = date.getSeconds() * 100;
var milliseconds = date.getMilliseconds() / 10;
/* var minutesNormal = date.getMinutes();*/
var minCounter = 0;
var hourCounter = 0;
if (seconds === 0) {
minCounter = milliseconds - 100;
} else {
minCounter = 0;
}
if (minutes === 0) {
hourCounter = milliseconds - 100;
} else {
hourCounter = 0;
}
var compClock = document.getElementById("compareClock").innerHTML = "<p>" + hours / 100 + " " + minutes / 100 + " " + seconds / 100 + "</p>"
/* + "<p>Nomral Minute: " + minutesNormal + " Altered Minute: " + minutes / 100*/;
var hoursBar = document.getElementById("hours").style.backgroundPosition = "0px " + (hours + hourCounter) + "px";
var minutesBar = document.getElementById("minutes").style.backgroundPosition = "0px " + (minutes + minCounter) + "px";
var secondsBar = document.getElementById("seconds").style.backgroundPosition = "0px " + (seconds + milliseconds) + "px";
/* alert(secondsBar);*/
}, 10);
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="testDiv"></div>
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>
</body>
</html>

I think this does what you want..
(function () {
var
d_compareclock = document.getElementById("compareClock"),
d_hours = document.getElementById("hours"),
d_minutesBar = document.getElementById("minutes"),
d_secondsBar = document.getElementById("seconds");
setInterval(function() {
var
date = new Date(),
hours = date.getHours() * 100,
minutes = date.getMinutes() * 100,
milliseconds = date.getMilliseconds() / 10,
seconds = date.getSeconds() * 100;
if (date.getSeconds() >= 59) {
minutes += milliseconds;
if (date.getMinutes() >= 59)
hours += milliseconds;
}
d_compareclock.innerHTML = "<p>" + hours / 100 +
" " + minutes / 100 + " " + seconds / 100 + "</p>"
d_hours.style.backgroundPosition = "0px " + (hours) + "px";
d_minutesBar.style.backgroundPosition = "0px " +
(minutes) + "px";
d_secondsBar.style.backgroundPosition = "0px " +
(seconds + milliseconds) + "px";
}, 10);
})();
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(http://infinitedv.co.uk/clock/images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<div id="container">
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>

Individually styling javascript output of a countdown timer

I'm trying to style the output of a javascript date counter. I need to be able to style the days, hours, minutes & seconds separately. I want to right align each in it's own div with it's own left and top absolute values. When I try to do that the timer does not replace the previous numbers, but adds to them, creating a big mess.
Here's the output code I am trying to style individually:
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
Here's a fiddle of it working fine but without separate styling
But, when I try to put them in separate divs crazy stuff happens, haha. The counter does not update, but just adds numbers instead.
Here's a fiddle of that
How do I do this?

When you are inserting the innerHTML values to the div, you can wrap the values inside a span with a class.
JSfiddle demo
document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
CountDownTimer('01/01/2016 10:01 AM', 'countdown');
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
#countdown {
position: absolute;
z-index: 5;
left: 20px;
top: 20px;
color: #ff0000;
font-family: Helvetica, Arial, sans-serif;
font-size: 32px;
display: inline;
}
.days {
color: lightblue;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
}
.minutes {
color: tomato;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
}
.seconds {
color: gray;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
}
.hours {
color: tomato;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
}
<div id="countdown">
</div>

If you will remove the line
document.getElementById(id).innerHTML = days + 'days ';
You will see "creating a big mess.". You must clear the div before put something to them.
document.getElementById(id).innerHTML = '';

Instead of adding all your time elements to a single I'd, create 4 separate divs inside the div you already have. Then use getElementById to put each time element inside it's own div.
That will allow you to use css to style each individually.