We Keep Coding

Countdown timer - using several times in a page

I'm trying to use this countdown in a wordpress page:
https://codepen.io/varzin/pen/rFfhH
It works on, but I need to use it several times in the same page.
document.getElementById("timer")
I tried to change to document.getElementsbyClassName("timer") but it didn't work.
Am I missing something?
function updateTimer() {
future = Date.parse("June 11, 2021 11:30:00");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
document.getElementById("timer")
.innerHTML =
'<div>' + d + '<span>days</span></div>' +
'<div>' + h + '<span>hours</span></div>' +
'<div>' + m + '<span>minutes</span></div>' +
'<div>' + s + '<span>seconds</span></div>';
}
setInterval('updateTimer()', 1000);
body {
text-align: center;
padding: 70px 50px;
background: #0D1A29;
font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}
#timer {
font-size: 3em;
font-weight: 100;
color: white;
text-shadow: 0 0 20px #48C8FF;
div {
display: inline-block;
min-width: 90px;
span {
color: #B1CDF1;
display: block;
font-size: .35em;
font-weight: 400;
}
}
}
<div id="timer"></div>

You need use Array of elements, and foreach element change text.
But better create Class or function for specify future
Your demo with array of timers:
https://codepen.io/Nekiy2/pen/NWNRgPz
function updateTimer() {
future = Date.parse("June 11, 2020 11:30:00");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
let timers = document.querySelectorAll('.timer')
timers.forEach((e) => { // array of timers
e.innerHTML =
'<div>' + d + '<span>days</span></div>' +
'<div>' + h + '<span>hours</span></div>' +
'<div>' + m + '<span>minutes</span></div>' +
'<div>' + s + '<span>seconds</span></div>';
})
}
setInterval('updateTimer()', 1000);
body {
text-align: center;
padding: 70px 50px;
background: #0D1A29;
font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}
.timer {
font-size: 3em;
font-weight: 100;
color: white;
text-shadow: 0 0 20px #48C8FF;
div {
display: inline-block;
min-width: 90px;
span {
color: #B1CDF1;
display: block;
font-size: .35em;
font-weight: 400;
}
}
}
<div class="countdown timer"></div>
<div class="countdown timer"></div>

I made a working example with `querySelectorAll() and looping over it.
Note: You also need to change the id of the div to a class and de id selector in the css to a class selector.
function updateTimer() {
console.log()
future = Date.parse("June 11, 2020 11:30:00");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
document.querySelectorAll('.timer').forEach((el) => {
el.innerHTML =
'<div>' + d + '<span>days</span></div>' +
'<div>' + h + '<span>hours</span></div>' +
'<div>' + m + '<span>minutes</span></div>' +
'<div>' + s + '<span>seconds</span></div>';
});
}
setInterval('updateTimer()', 1000);
body {
text-align: center;
padding: 70px 50px;
background: #0D1A29;
font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}
.timer {
font-size: 3em;
font-weight: 100;
color: white;
text-shadow: 0 0 20px #48C8FF;
div {
display: inline-block;
min-width: 90px;
span {
color: #B1CDF1;
display: block;
font-size: .35em;
font-weight: 400;
}
}
}
<div class="timer"></div>
<br>
<div class="timer"></div>

You can get the value from the divs
This code allows different timers on the page
Put the same time on all divs to get the same timer
function updateTimer() {
[...document.querySelectorAll(".timer")].forEach(timer => {
const future = Date.parse(timer.getAttribute("data-future"));
const now = new Date();
const diff = future - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor(diff / (1000 * 60 * 60));
const mins = Math.floor(diff / (1000 * 60));
const secs = Math.floor(diff / 1000);
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
timer.innerHTML = `<div>${days}<span>day${days===1?"":"s"}</span></div>
<div>${h}<span>hour${h===1?"":"s"}</span></div>
<div>${m}<span>minute${m===1?"":"s"}</span></div>
<div>${s}<span>second${s===1?"":"s"}</span></div>`;
})
}
setInterval('updateTimer()', 1000);
body {
text-align: center;
padding: 70px 50px;
background: #0D1A29;
font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}
.timer {
font-size: 3em;
font-weight: 100;
color: white;
text-shadow: 0 0 20px #48C8FF;
div {
display: inline-block;
min-width: 90px;
span {
color: #B1CDF1;
display: block;
font-size: .35em;
font-weight: 400;
}
}
}
<div class="timer" data-future="June 11, 2021 11:30:00"></div>
<hr/>
<div class="timer" data-future="May 2, 2021 14:30:00"></div>

When working with selection by class name, here is what #CBroe was trying to say:
Array.from(document.getElementsByClassName("timer")).forEach(el => {
el.innerHTML =
'<div>' + d + '<span>days</span></div>' +
'<div>' + h + '<span>hours</span></div>' +
'<div>' + m + '<span>minutes</span></div>' +
'<div>' + s + '<span>seconds</span></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);

Link Progress bar to days/time remaining countdown

I am building a deal page with countdown timer to show how much time is remaining to claim the offer. I have the countdown timer working to show how many days, hours, minutes and seconds are left, but would like to have a visual progress bar under the time that fills up based on the days left.
For example, the offer goes live July 1 and expires July 31. If the user loads the page on July 1, the progress bar would be at 0%. On July 31, the progress bar would be set to 100%.
I am currently using the progress bar styling and HTML code used by Bootstrap 3.
I've been trying to the width style property for "progress-bar" to the days remaining, but have not been able to get them to link up
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("july 31, 2019 23:59:59"); initializeClock('clockdiv', deadline);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="clockdiv" style="font-weight:600;text-transform: uppercase">Time Remaining:<span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span></div>
<div class="progress" style="margin-bottom:8px;border-radius: 4px">
<div class="progress-bar progress-bar-striped active" style="width:%;border-radius: 4px">
</div>
</div>

Here is a working demo using
Math.round(((today - start) / (end - start)) * 100) + '%';
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, starttime) {
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');
var $progress = $('.progress-bar')
function updateClock() {
var t = getTimeRemaining(endtime);
var p = Math.round(((new Date() - starttime) / (endtime - starttime)) * 100) + '%';
$progress.css('width', p);
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 starttime = new Date("july 1, 2019 23:59:59");
var deadline = new Date("july 31, 2019 23:59:59");
initializeClock('clockdiv', deadline, starttime);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="clockdiv" style="font-weight:600;text-transform: uppercase">Time Remaining:<span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span></div>
<div class="progress" style="margin-bottom:8px;border-radius: 4px">
<div class="progress-bar progress-bar-striped active" style="width:%;border-radius: 4px">
</div>
</div>
Note: It is not necessary to update progress bar every second, It's fine in minutes

You can use document.querySelector('.progress-bar') and then use .style.width = 'xx %' to set the width.
I've refactored the code a bit to make it more readable :)
Working example:
function Clock(id, startDate, endDate) {
this.clock = document.getElementById(id);
this.timeEl = this.clock.querySelector('.time');
this.progressEl = this.clock.querySelector('.progress-bar');
this.startDate = startDate;
this.endDate = endDate;
this.updateClock();
this.interval = setInterval(this.updateClock.bind(this), 1000);
}
Clock.prototype.updateClock = function() {
var rem = this.getTimeRemaining();
// Update time element
var duration = [
rem.days,
this.padLeft(rem.hours),
this.padLeft(rem.minutes),
this.padLeft(rem.seconds)
];
this.timeEl.innerHTML = duration.join(":");
// Update progress
var progress = this.getProgress(rem.total);
this.progressEl.style.width = (progress * 100) + "%";
// Clear intervall when done
if(rem.t === 0 && this.interval) {
clearInterval(this.interval);
delete this.interval;
}
};
Clock.prototype.padLeft = function(number) {
return ('0' + number).slice(-2);
};
Clock.prototype.getTimeRemaining = function() {
var t = this.endDate - new Date();
if(t < 0) t = 0;
return {
total: t,
days: Math.floor(t / (1000 * 60 * 60 * 24)),
hours: Math.floor((t / (1000 * 60 * 60)) % 24),
minutes: Math.floor((t / 1000 / 60) % 60),
seconds: Math.floor((t / 1000) % 60)
};
};
Clock.prototype.getProgress = function(remainingTime) {
var totalTime = this.endDate - this.startDate;
return 1 - (remainingTime / totalTime);
};
// Example. Replace startDate and endDate with your dates (30sec for demo)
var startDate = new Date();
var endDate = new Date(Date.now() + 30 * 1000);
new Clock("clockdiv", startDate, endDate);
#clockdiv {
font-weight: 600;
text-transform: uppercase;
}
.progress {
margin-bottom: 8px;
border-radius: 4px;
}
.progress-bar {
width: 100%;
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="clockdiv">
<div>
Time Remaining:
<span class="time"></span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active"></div>
</div>
</div>

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>

Styling a countdown timer in jQuery

I have created a countdown timer in jQuery but i am not aware of how to go about styling it. I want to sytle it as per the attached image.
FIDDLE
jQuery:
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);

http://jsfiddle.net/456jn/44/
CSS:
#countdown {
font-family: trebuchet ms;
color: #2A3435;
border-width: 1px 1px 2px 1px;
border-style: solid;
border-color: #D2CFCA;
background: #eee;
padding: 2px;
display: inline-block;
}
#countdown span {
display: inline-block;
margin-left: 5px;
min-width: 40px;
text-align: center;
font-size: 10px;
font-weight: normal;
}
#countdown span:first-child {
margin-left: 0;
}
#countdown span span {
font-size: 18px;
display: block;
}
Javscript:
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
var days_span = document.createElement("SPAN");
days_span.className = 'days';
countdown.appendChild(days_span);
var hours_span = document.createElement("SPAN");
hours_span.className = 'hours';
countdown.appendChild(hours_span);
var minutes_span = document.createElement("SPAN");
minutes_span.className = 'minutes';
countdown.appendChild(minutes_span);
var secs_span = document.createElement("SPAN");
secs_span.className = 'secs';
countdown.appendChild(secs_span);
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value.
days_span.innerHTML = '<span>' + days + '</span>' + 'Days';
hours_span.innerHTML = '<span>' + hours + '</span>' + 'Hours';
minutes_span.innerHTML = '<span>' + minutes + '</span>' + 'Minutes';
secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Seconds';

Format your timer like this:
countdown.innerHTML = "<table><tr><td>"+days+"</td><td>"+hours+"</td><td>"+ minutes+"</td><td>"+seconds+"</td></tr>
<tr><td>days</td><td>hours</td><td>minutes</td><td>seconds</td></tr></table>";
Then style the table.