s0rfi949 s0rfi949 - 7 months ago 14
Javascript Question

How to break this Javascript into seperate CSS classes?

Here's a working fiddle:
https://jsfiddle.net/dhqnad9a/

HTML:

<div class="aligned-center">
<div id="countdown">
<h5>Campaign Ends:</h5>
<span class="sect" id="days"></span>
<span class="sect" id="hrs"></span>
<span class="sect" id="mins"></span>
<span class="sect" id="secs"></span>
</div>
</div>


JavaScript:

CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');

function CountDownTimer(date, id) {
var end = new Date(date);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

var showRemaining = function() {
var now = new Date();
var distance = end - now;

if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'ENDED!';
return;
}

days.innerHTML = Math.floor(distance / _day) + '<br> days ';
hrs.innerHTML = Math.floor((distance % _day) / _hour) + '<br> hours ';
mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
};

timer = setInterval(showRemaining, 1000);}


I want to add CSS styles (not sure if its possible thru JS) to the numbers, such that the font-size and weight are different from line 1 to line 2.

So far, I can only change both thru
.sect
class, do I need to rewrite the JS?

Here's what I'm hoping to do:

example of the desired look

Answer

In your JavaScript, just wrap the text that needs to be changed individually with a DIV or SPAN, then change the CSS for that class. In other words, use this instead:

days.innerHTML = "<span class='big'>" + Math.floor(distance / _day) + '</span><br><span class="small">days</span>';
hrs.innerHTML  = "<span class='big'>" + Math.floor((distance % _day) / _hour) + '</span><br><span class="small">hours</span>';
mins.innerHTML = "<span class='big'>" + Math.floor((distance % _hour) / _minute) + '</span><br><span class="small">mins</span>';
secs.innerHTML = "<span class='big'>" + Math.floor((distance % _minute) / _second) + '</span><br><span class="small">secs</span>';

And define the CSS for the new .big and .small classes:

.big{
    font:bold 12pt Arial, sans-serif;
    color:#777;
}
.small{
    font:bold 8pt Arial, sans-serif;
}

Here are the changes: https://jsfiddle.net/vcsq40of/

Edit: Since I randomly received an upvote on this answer today, I thought I'd update it to include that the above Fiddle no longer has jQuery included (I assume the CDN where I pulled it from originally no longer has it available at that path), and that the date it is looking at has already passed (so it needs to be changed to a future date to work properly). If you want to see this demo, you can use that link, add jQuery, and change the date. Or you can use this new updated Fiddle: https://jsfiddle.net/vcsq40of/1/