post

headless


<section id="countdownblock_f7d91b7c3af214dca11554084329c49d" class="ountdown container small spacing-8">
    <div class="countdown-section grid col-2 gap-3 md-flex around" data-date="November 16, 2022  0:00">
        <div class="align-center padding-x-2">
            <p id="daystxt">Tage</p>
            <p id="days" class="title-xl no-margin">000</p>
        </div>
        <div class="align-center padding-x-2">
            <p id="hourstxt">Stunden</p>
            <p id="hours" class="title-xl no-margin">00</p>
        </div>
        <div class="align-center padding-x-2">
            <p id="minutestxt">Minuten</p>
            <p id="minutes" class="title-xl no-margin">00</p>
        </div>
        <div class="align-center padding-x-2">
            <p id="secondstxt">Sekunden</p>
            <p id="seconds" class="title-xl no-margin">00</p>
        </div>
    </div>
    <div class="alert expired-message disappear align-center">
        <strong>Dieser Termin ist abgelaufen</strong>
    </div>
</section>
<script>
    const countdown = document.querySelector('.countdown-section');
    const date = countdown.getAttribute('data-date');
    const finaleDate = new Date(date).getTime();

    const timer = () =>{
        const now = new Date().getTime();
        let diff = finaleDate - now;
        if(diff < 0){
            document.querySelector('.alert').style.display = 'block';
            document.querySelector('.countdown-section').style.display = 'none';
            document.querySelector('.expired-message').style.display = 'block';
        } else{
            let days = Math.floor(diff / (1000*60*60*24));
            let hours = Math.floor(diff % (1000*60*60*24) / (1000*60*60));
            let minutes = Math.floor(diff % (1000*60*60)/ (1000*60));
            let seconds = Math.floor(diff % (1000*60) / 1000);

            days < 10 ? days = `0${days}` : days;
            hours < 10 ? hours = `0${hours}` : hours;
            minutes < 10 ? minutes = `0${minutes}` : minutes;
            seconds < 10 ? seconds = `0${seconds}` : seconds;   

            document.querySelector('#days').textContent = days;
            document.querySelector('#hours').textContent = hours;
            document.querySelector('#minutes').textContent = minutes;
            document.querySelector('#seconds').textContent = seconds;
        }
    }
    timer();
    setInterval(timer,1000);
</script>

Test