What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

SUPER-SIMPLE - Add styling to a countdown clock

jenmc

New member
Hi,

Hoping this is really easy to someone who isn't a total newbie to coding!

I've got the following code to add a countdown clock to my site today, but I want to add styling to it to centralise, make bold and size 16pt, but I can't work out what I need to add where - hoping someone can help ASAP?


----------------

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<p id="demo"></p>



<script>


// Set the date we're counting down to
var countDownDate = new Date("Apr 27, 2021 23:59:59").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);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Sorry, you missed it!";
}
}, 1000);



</script>

------------


</body>



</html>
 
Ideally I'd also like it to show "Hurry! This offer ends in: " before the clock so it's all on one line.
 
Back
Top