Style Countdown Timer Change

[CarraraWebsiteSolutions]

Hi.

I have a countdown timer js code that I am working on but it is hard to style it. I would like to know if there is away to make the value in html so can easier style it it is a bit hard in js.

Trying to style the count down number different to the value

http://codepen.io/CarraraWebsiteSolutions/pen/uxqFg

[pils87]

I’m a newb so not sure if this is the way to go but you can just edit this part in the js:

    countdown.innerHTML = days +  " Days " + hours + " Hours "
+ minutes + " Minutes " + seconds + " Seconds";  

For example adding a span arround “Days”:

countdown.innerHTML = "<span>" + days +  "</span> Days " + hours + " Hours "
+ minutes + " Minutes " + seconds + " Seconds";

[CarraraWebsiteSolutions]

Will give it a go

[Josh]

What @pils87 said, but taking it a step further to separate the text from the numbers, for even more granular styling: http://codepen.io/JoshBlackwood/pen/lukjq

Please pardon the garish colors, just wanted to make the point.

[CarraraWebsiteSolutions]

Thanks that ways what I am after. Gives me more options of styling it now.

[Author]

Posts