Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    2024 Countdown HTML Code (Temp)

    Uploaded by

    duka190711

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    2024 Countdown HTML Code (Temp)

    Uploaded by

    duka190711
    2 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    2 views3 pages

    2024 Countdown HTML Code (Temp)

    Uploaded by

    duka190711

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!--Special thanks to ChatGPT (https://chat.openai.com) for this amazing code!

    -->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2024 Countdown</title>
    <style type="text/css">
    /*Special thanks to ChatGPT (https://chat.openai.com) for this amazing
    code!*/

    * {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    .fireworks-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    }

    .fireworks {
    background-image:
    url('https://www.androidguys.com/wp-content/uploads/2015/12/Fireworks1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    animation: fireworks 7500ms infinite;
    }

    @keyframes fireworks {
    0% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: .7; }
    }

    .countdown-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    }

    h1 {
    font-size: 3.5em;
    font-family: 'Montserrat';
    }

    #countdown {
    font-size: 5em;
    font-family: 'Tahoma';
    font-weight: 800;
    text-align: center;
    letter-spacing: 10px;
    line-height: 120px;
    }
    span#m {
    font-size: 1.7em;
    }
    span#s {
    font-size: 1.3em;
    }
    span#ms {
    font-size: .8em;
    }
    </style>
    </head>
    <body>
    <div class="fireworks-container">
    <div class="fireworks"></div>
    </div>

    <div class="countdown-container">
    <h1>Countdown to 2024</h1>
    <div id="countdown"><span id="m">00</span>:<span id="s">00</span>.<span
    id="ms">00</span></div>
    </div>

    <script text="type/javascript">
    // Special thanks to ChatGPT (https://chat.openai.com) for this amazing
    code!

    const d = document.getElementById('d');
    const h = document.getElementById('h');
    const m = document.getElementById('m');
    const s = document.getElementById('s');
    const countdown = document.getElementById('countdown');

    document.addEventListener('DOMContentLoaded', function () {
    const targetDate = new Date("2024-01-01T00:00:00+07:00");

    let interval = setInterval(function () {


    let distance = targetDate - new Date();

    let days = Math.floor(distance / 86400000);


    let hours = Math.floor((distance % 86400000) / 3600000);
    let minutes = Math.floor((distance % 3600000) / 60000);
    let seconds = Math.floor((distance % 60000) / 1000);
    let milliseconds = Math.floor(distance % 1000);

    m.innerHTML = (minutes + hours * 60 + days * 1440).toFixed(0).padStart(2,


    '0');
    s.innerHTML = seconds.toFixed(0).padStart(2, '0');
    ms.innerHTML = Math.floor(milliseconds / 10).toFixed(0).padStart(2, '0');

    if (distance < 0) {
    clearInterval(interval);
    countdown.style.letterSpacing = 'normal';
    countdown.style.fontSize = '53px';
    document.getElementById("countdown").innerHTML = "Happy New Year
    2024!";
    }
    }, 28);
    });
    </script>
    </body>
    </html>

    You might also like