Event Count down timer using Javascript, HTML & CSS

Embark on a captivating journey into the world of event countdown timers with our project using Javascript, HTML, and CSS. In this article, we’ll guide you through the process and provide the necessary source code to create a visually stunning and highly functional countdown timer, adding excitement and anticipation to your special occasions or deadlines.

Index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Countdown Timer</title>
</head>
<body>
    <p>Time Until</p>
    <p id="countdown-from"></p>
    <p id="root"></p>
    <script src="script.js"></script>
</body>
</html>

Style.css


p{
    text-align: center;
    font-size: 125px;
}
P#root{
    color: blue;
    font-size: 150px;
}

body{
    background-color: yellow;
    color: black;
}

Script.js


//Set date to countdown to:
let countDownFromDate = new Date('Feb 1, 2020 12:00:00').toDateString();
let countDownDate = new Date('Feb 1, 2020 12:00:00').getTime();
let x = setInterval(function(){
let now = new Date().getTime();
//get distance between current date to countdown date
let distance = countDownDate - now;
//get days, hours, minutes, and seconds
let days = Math.floor(distance / (1000 * 60 *60 * 24));
let hours = Math.floor((distance % (1000 * 60 *60*24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60))/ (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
//output countdown from date
document.getElementById('countdown-from').innerHTML = `${countDownFromDate}`
//output timer to HTML
document.getElementById('root').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

//stop countdown timer when date is reached
if (distance < 0){
    clearInterval(x);
    document.getElementById('root').innerHTML = 'Timer Expired';
}

}, 1000);
ideasorblogs
Latest posts by ideasorblogs (see all)
Tags: , ,

Leave a Reply