We Keep Coding

How can I style individual numbers in a countdown clock on my web page?

Helloooo...I've been tasked with creating a web page that contains a count down clock. I have managed to create the clock with HTML and Javascript but what I am having trouble with is the formatting. The client wants the days, hours and minutes in separate individual circles. Not animated, just plain. I've tried a few things with no results. I thought maybe if I created a separate clock for the Days, hours and minutes, that that would work, but when I do this, the clocks disappear. Would love some advice. Thanks a million.
The code for the clock I used is as follows:
<script>
var countDownDate = new Date("Feb 14, 2021 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "We Are Live!";
}
}, 1000);
</script>
The CSS I used is as follows but I can only get that to work when I just have one time from the clock, like just the days for instance.
.demo{
border-radius: 50%;
width: 50px;
height: 50px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 30px cantata;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
}
</style>

Just place the hours, minutes, and seconds within their own containers and style them separately, e.g:
<div id="demo">
<span id="hours"/>:
<span id="minutes"/>:
<span id="seconds"/>
</div>

Javascript date countdown with custom date

var timer;
var compareDate = new Date();
compareDate.setDate(Date.parse('2020-06-02'));
timer = setInterval(function() {
timeBetweenDates(compareDate);
}, 1000);
function timeBetweenDates(toDate) {
var dateEntered = toDate;
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
if (difference <= 0) {
// Timer done
clearInterval(timer);
} else {
var seconds = Math.floor(difference / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
$("#days").text(days);
$("#hours").text(hours);
$("#minutes").text(minutes);
$("#seconds").text(seconds);
}
}
body {
background: #f5f5f5;
}
#timer {
font-family: Arial, sans-serif;
font-size: 20px;
color: #999;
letter-spacing: -1px;
}
#timer span {
font-size: 60px;
color: #333;
margin: 0 3px 0 15px;
}
#timer span:first-child {
margin-left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">
<span id="days"></span>days
<span id="hours"></span>hours
<span id="minutes"></span>minutes
<span id="seconds"></span>seconds
</div>

setDate() sets only Day of the current month in date object. You can directly provide your date string in YYYY-MM-DD format to Date() while creating new object.
var timer;
var compareDate = new Date('2020-06-02');
// compareDate.setDate(Date.parse('2020-06-02'));
timer = setInterval(function() {
timeBetweenDates(compareDate);
}, 1000);
function timeBetweenDates(toDate) {
var dateEntered = toDate;
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
if (difference <= 0) {
// Timer done
clearInterval(timer);
} else {
var seconds = Math.floor(difference / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
$("#days").text(days);
$("#hours").text(hours);
$("#minutes").text(minutes);
$("#seconds").text(seconds);
}
}
body {
background: #f5f5f5;
}
#timer {
font-family: Arial, sans-serif;
font-size: 20px;
color: #999;
letter-spacing: -1px;
}
#timer span {
font-size: 60px;
color: #333;
margin: 0 3px 0 15px;
}
#timer span:first-child {
margin-left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">
<span id="days"></span>days
<span id="hours"></span>hours
<span id="minutes"></span>minutes
<span id="seconds"></span>seconds
</div>

Directly set new Date()
var compareDate = new Date('2020-06-02');

Change
var compareDate = new Date();
compareDate.setDate(Date.parse('2020-06-02'));
to
var compareDate = new Date(2020, 05, 2);

Count down clock resets

I have a count down clock on my site but it resets if you clear your browser history. Is there a way to stop this from happening. I found the code on a website that you can download from. I was not expecting it to reset when you clear your browser history. Can this code be modified or would it be better for me to find another code for it.
Thanks
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
#clockdiv {
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: 100;
text-align: center;
}
#clockdiv > div {
background: #0294cb;
border-radius: 3px;
display: inline-block;
padding: 8px;
}
#clockdiv div > span {
background: #42baff;
border-radius: 3px;
display: inline-block;
padding: 15px;
}
.smalltext {
font-size: 14px;
padding-top: 5px;
}
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>

You can save the initial deadline time in localStorage(But this will get cleared on erasing history) and then use that instead of resetting it again on reload, If you want your timer to not reset when clearing data, you will have to maintain a server side state.

You can add this piece of code to the bottom of your script. Instead of initializing new deadline each time, you check whether the deadline has already been initialized and stored in localStorage, if so then fetch the deadline from it. If no, the create the new deadline like you did in your original code and store it in localStorage.
Note that you need to use JSON.stringify and JSON.parse methods if you want to store and later retrieve an object from localStorage because it can only hold strings and default string representation of an object isn't very useful.
This code will not reset the countdown on page reload and you can clean history as well but you can't clear localStorage (cached files and cookies) for it to work.
if (!localStorage.getItem('deadline')) {
const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
localStorage.setItem('deadline', JSON.stringify(deadline));
initializeClock('clockdiv', deadline);
} else {
const deadline = JSON.parse(localStorage.getItem('deadline'));
initializeClock('clockdiv', deadline);
}
See the snippet for full code, but note that it will not work here because localStorage is not accessible on SO. You will need to copy and paste it and test it in your browser.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
if (!localStorage.getItem('deadline')) {
const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
localStorage.setItem('deadline', JSON.stringify(deadline));
initializeClock('clockdiv', deadline);
} else {
const deadline = JSON.parse(localStorage.getItem('deadline'));
initializeClock('clockdiv', deadline);
}
#clockdiv {
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: 100;
text-align: center;
}
#clockdiv > div {
background: #0294cb;
border-radius: 3px;
display: inline-block;
padding: 8px;
}
#clockdiv div > span {
background: #42baff;
border-radius: 3px;
display: inline-block;
padding: 15px;
}
.smalltext {
font-size: 14px;
padding-top: 5px;
}
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>

javascript countdown timer restart after every 10 minutes

Hi i got the countdown timer code from :
https://codepen.io/SitePoint/pen/MwNPVq,
and have modified as :
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
return {
'total': t,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
if(t.minutes == 0 && t.seconds ==0) {
console.log('in this func');
deadline = new Date(deadline.getTime() + 10*60000);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
deadline = new Date(Date.parse('Fri Mar 30 2018 17:03:00 GMT+0530'));
initializeClock('clockdiv', deadline);
what change, i have done is, i have checked if minutes and seconds both are 0, then the variable 'deadline' should be updated with new time. The countdown timer works fine but as it hits 0:0, it enters the function and everything stops.

You need to initialize clock again when it hits 0:0 (updated pen)
if (t.minutes == 0 && t.seconds == 0) {
console.log('in this func');
deadline = new Date(deadline.getTime() + 10 * 60000);
initializeClock('clockdiv', deadline); //added this line
}
Demo
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
if (t.minutes == 0 && t.seconds == 0) {
console.log('in this func');
deadline = new Date(deadline.getTime() + 10 * 60000);
initializeClock('clockdiv', deadline); //added this line
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 1 * 1 * 1 * 6 * 1000);
initializeClock('clockdiv', deadline);
body {
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1 {
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div>span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>

How to center a DIV created by Javascript?

Here is my code for a counter (modified from www.w3schools.com code).
I'm struggling to horizontally center the output. I have tried to wrap in a DIV and then use the following techniques to center that DIV, but no success, any pointers appreciated:
Using CSS to style the outside DIV with text-align: center;
Using CSS to style the outside DIV with margin-left: auto; & margin-right:auto;
Using Javascript to set the margin property of the output horizontally align;
<!DOCTYPE HTML>
<html>
<head>
<style>
.bigger {
text-align: center;
font-size: 1.35em;
}
.counter_p {
text-align: center;
font-size: 6em;
padding: 0px 0px 0px 0px;
line-height: 1em;
}
.counter_label {
font-size: 0.2em;
line-height: 1em;
}
}
</style>
</head>
<body>
<div class="counter_p" id="counter"></div>
<script>
function pad(str, max) {
return str.length < max ? pad("0" + str, max) : str;
}
// Set the date we're counting down to
var countDownDate = new Date("Sep 1, 2017 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 an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = pad(String(Math.floor(distance / (1000 * 60 * 60 * 24))),2);
var hours = pad(String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);
var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);
// My attempt at horizontally centering the output
document.getElementById('counter').style.margin = '0 auto';
// Output the result in an element with id="counter"
document.getElementById("counter").innerHTML =
"<div style='text-align:center'>"
+ "<table border='0'>"
+ "<tr>"
+ "<td>"
+ "<div>"+ days + "</div>"
+ "<div class='counter_label'>Days</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + hours + "</div>"
+ "<div class='counter_label'>Hours</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + minutes + "</div>"
+ "<div class='counter_label' >Mins</div>"
+ "</td>"
+ "<td class='bigger'>|</td>"
+ "<td>"
+ "<div>" + seconds + "</div>"
+ "<div class='counter_label'>Secs</div>"
+ "</td>"
+ "<td>"
+ "</tr>"
+ "</table>"
+"</div>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "Countdown is complete";
}
}, 1000);
</script>
</body>
</html>

Creating a container div to hold the countdown text works in this case (using the CSS flexbox with justify-content set to "center") - flexbox works correctly on window resize:
<!DOCTYPE HTML>
<html>
<head>
<style>
.bigger {
text-align: center;
font-size: 1.35em;
}
.counter_p {
text-align: center;
font-size: 6em;
padding:0px 0px 0px 0px;
line-height:1em;
}
.counter_label {
font-size:0.2em;
line-height:1em;
}
.container {
display: flex;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="counter_p" id="counter"></div>
</div>
<script>
function pad (str, max) {
return str.length < max ? pad("0" + str, max) : str;
}
// Set the date we're counting down to
var countDownDate = new Date("Sep 1, 2017 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 an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = pad(String(Math.floor(distance / (1000 * 60 * 60 * 24))),2);
var hours = pad(String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);
var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);
// Output the result in an element with id="counter"
document.getElementById("counter").innerHTML = "<div style='text-align:center'><table border='0'><tr><td><div>"+ days + "</div><div class='counter_label' >Days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>Hours</div></td><td class='bigger'>|</td><td><div>"
+ minutes + "</div><div class='counter_label' >Mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>Secs</div></td><td></tr></table></div>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "Countdown is complete";
}
}, 1000);
</script>
</body>
</html>
Note: CSS Flexbox is not supported in older browsers, see CSS Flexible Box Layout Module

below, are steps to find the center of a div with JS. it will be best to attach that to on window resize event. so it will move as user change window size.
//create div via js
var div = document.createElement("div");
document.body.appendChild(div);
//find widow width
var winWidth = document.documentElement.clientWidth;
//find div width
var divWidth = div.offsetWidth;
//find center position
var centerPos = (winWidth/2) - (divWidth/2)
//put div at position
div.style.marginLeft = centerPos+'px';
div {
height: 100px;
width: 100px;
background-color: red;
}

Your issue is simply the usual question of centering with css. I recommend you get familiar with this notion because it comes a lot when programming web interfaces.
This is some topic on the subject:
How do you easily horizontally center a <div> using CSS?
https://www.w3schools.com/css/css_align.asp
I also invite you to look for youtube video:
https://www.youtube.com/watch?v=hIG-fZ2042k
My solution
use a class to center (equivalent to your second idea)
.centered {
display: table;
margin: 0 auto;
}
margin: 0 auto; works only if you div as a width or display table.
function pad (str, max) {
return str.length < max ? pad("0" + str, max) : str;
}
// Set the date we're counting down to
var countDownDate = new Date("Sep 1, 2017 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 an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = pad(String(Math.floor(distance / (1000 * 60 * 60 * 24))),2);
var hours = pad(String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))),2);
var minutes = pad(String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))),2);
var seconds = pad(String(Math.floor((distance % (1000 * 60)) / 1000)),2);
// My attempt at horizontally centering the output
document.getElementById('counter').style.margin = '0 auto';
// Output the result in an element with id="counter"
document.getElementById("counter").innerHTML = "<div class='centered'><table border='0'><tr><td><div>"+ days + "</div><div class='counter_label' >Days</div></td><td class='bigger'>|</td><td><div>" + hours + "</div><div class='counter_label'>Hours</div></td><td class='bigger'>|</td><td><div>"
+ minutes + "</div><div class='counter_label' >Mins</div></td><td class='bigger'>|</td><td><div>" + seconds + "</div><div class='counter_label'>Secs</div></td><td></tr></table></div>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "Countdown is complete";
}
}, 1000);
#counter{
border: 3px solid red;
}
.bigger {
text-align: center;
font-size: 1.35em;
}
.counter_p {
text-align: center;
font-size: 6em;
padding:0px 0px 0px 0px;
line-height:1em;
}
.counter_label {
font-size:0.2em;
line-height:1em;
}
.centered {
border: 3px solid blue;
display: table;
margin: 0 auto;
}
<div class="counter_p" id="counter"></div>