HTML/CSS - The Final Countdown Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
<head>
    <title>Birthday Countdown</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main">
        <div class="overlay">
            <div class="title">MY BIRTHDAY IS COMING SOON </div>
            <div class="title" id="end-date">4 March 2025</div>
            <div class="col">
                <div>
                    <input type="text" readonly id="days" value="00">
                    <br>
                    <label>Days</label>
                </div>
                <div>
                    <input type="text" readonly id="hours" value="00">
                    <br>
                    <label>Hours</label>
                </div>
                <div>
                    <input type="text" readonly id="minutes" value="00">
                    <br>
                    <label>Minutes</label>
                </div>
                <div>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main {
    width: 100%;
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSjYkvTQ2a-OgaddVl-5L6Q3mu00jmmXh9EA&usqp=CAU') center center;
    height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay {
    width: 100%;
    height: 100%;
    background-color:  rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.title {
    color:  white;

window.onload = function () {
    const endDate = "march 4, 2026 00:45:00"; // Use correct date format
    document.getElementById("end-date").innerText = "4 March 2025 00:00 AM";
    function clock() {
        const end = new Date(endDate);
        const now = new Date();
        const diff = (end - now) / 1000; // Difference in seconds
        if (diff < 0) {
            document.getElementById("days").value = "00";
            document.getElementById("hours").value = "00";
            document.getElementById("minutes").value = "00";
            document.getElementById("seconds").value = "00";
            return;
        }
        const days = Math.floor(diff / 86400); // 86400 seconds in a day
        const hours = Math.floor((diff % 86400) / 3600); // Remaining hours
        const minutes = Math.floor((diff % 3600) / 60); // Remaining minutes
        const seconds = Math.floor(diff % 60); // Remaining seconds
        document.getElementById("days").value = days.toString().padStart(2, '0');
        document.getElementById("hours").value = hours.toString().padStart(2, '0');
        document.getElementById("minutes").value = minutes.toString().padStart(2, '0');
        document.getElementById("seconds").value = seconds.toString().padStart(2, '0');
    }

BROWSER

Console