How to Create a JavaScript Countdown Timer?

How to Create a JavaScript Countdown Timer?
Photo by Ralph Hutter / Unsplash

Certainly! Below is a simple example of a countdown timer using HTML, CSS, and JavaScript. You can copy and paste this code into an HTML file and open it in a web browser to see the countdown in action.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 50px;
        }

        #timer {
            font-size: 2em;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Countdown Timer</h1>
    <div id="timer"></div>

    <script>
        // Set the date we're counting down to (change this to your desired date)
        const countdownDate = new Date("Jan 1, 2023 00:00:00").getTime();

        // Update the countdown every 1 second
        const timerInterval = setInterval(updateCountdown, 1000);

        function updateCountdown() {
            // Get the current date and time
            const now = new Date().getTime();

            // Calculate the remaining time
            const timeDifference = countdownDate - now;

            // Calculate days, hours, minutes, and seconds
            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            // Display the countdown
            document.getElementById("timer").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

            // If the countdown is over, display a message and clear the interval
            if (timeDifference <= 0) {
                clearInterval(timerInterval);
                document.getElementById("timer").innerHTML = "Happy New Year!";
            }
        }
    </script>
</body>
</html>

In this example, the countdown is set to January 1, 2023. You can customize the countdownDate variable with your desired date and time. The script calculates the remaining days, hours, minutes, and seconds and updates the display every second.

When the countdown reaches zero, it displays a "Happy New Year!" message, but you can customize this message or add additional actions as needed.

Read more