Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Countdown Timer</title>
</head>
<body>
    <div id="countdown">
        <div>
            <span id="days"></span>
            <div class="smalltext">Days</div>
        </div>
        <div>
            <span id="hours"></span>
            <div class="smalltext">Hours</div>
        </div>
        <div>
            <span id="minutes"></span>
            <div class="smalltext">Minutes</div>
        </div>
        <div>
            <span id="seconds"></span>
            <div class="smalltext">Seconds</div>
        </div>
    </div>

    <script>
        // Set the target date and time (DD-MM-YYYY HH:MM:SS format)
        const targetDateString = "31-12-2023 00:00:00";
        const targetDateParts = targetDateString.split(/[\s-:]/);
        const targetDate = new Date(
            parseInt(targetDateParts[2], 10),  // Year
            parseInt(targetDateParts[1], 10) - 1,  // Month (zero-based)
            parseInt(targetDateParts[0], 10),  // Day
            parseInt(targetDateParts[3], 10),  // Hours
            parseInt(targetDateParts[4], 10),  // Minutes
            parseInt(targetDateParts[5], 10)   // Seconds
        ).getTime();

        // Update the countdown every 1 second
        const countdownInterval = setInterval(function () {
            const now = new Date().getTime();
            const timeRemaining = targetDate - now;

            if (timeRemaining <= 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "EXPIRED";
                return;
            }

            const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;
        }, 1000); // Update every 1 second
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter