Vebego Component Library

Countdown 

<div class="mol-countdown" data-endtime="2021-12-01T15:00:00">

    <div class="countdown-item days">
        <span class="value"></span>
        <span class="label">dagen</span>
    </div>

    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

    <div class="countdown-item hours">
        <span class="value"></span>
        <span class="label">uur</span>
    </div>

    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

    <div class="countdown-item minutes">
        <span class="value"></span>
        <span class="label">minuten</span>
    </div>

    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>

    <div class="countdown-item seconds">
        <span class="value"></span>
        <span class="label">seconden</span>
    </div>

</div>
 
<div class="mol-countdown" data-endtime="{{endtime}}">

    {{!-- Days --}}
    <div class="countdown-item days">
        <span class="value"></span>
        <span class="label">dagen</span>
    </div>

    {{render '@slash'}}

    {{!-- Hours --}}
    <div class="countdown-item hours">
        <span class="value"></span>
        <span class="label">uur</span>
    </div>

    {{render '@slash'}}

    {{!-- Minutes --}}
    <div class="countdown-item minutes">
        <span class="value"></span>
        <span class="label">minuten</span>
    </div>
    
    {{render '@slash'}}

    {{!-- Seconds --}}
    <div class="countdown-item seconds">
        <span class="value"></span>
        <span class="label">seconden</span>
    </div>

</div>
 
{
  "endtime": "2021-12-01T15:00:00"
}
  • Content: 
    .mol-countdown
{
    @apply flex justify-evenly items-center;

    .countdown-item
    {
        @apply text-center;
		@apply lowercase;
		
		min-width: 60px;

        .value
        {
            @apply block;
            @apply text-h1;
            @apply font-bold;
            @apply text-black;
        }

        .label
        {

        }
    }
}

.culture-de 
{
	.countdown-item 
	{		
		@apply capitalize;
	}
}
  • URL: /components/raw/countdown/countdown.css
  • Filesystem Path: src\components\03-molecules\countdown\countdown.css
  • Size: 451 Bytes
  • Content: 
    (function () {

    'use strict';

    document.querySelectorAll('.mol-countdown').forEach((el) => {
        var endtime;
        var interval;

        function parseDate(input) {
            // trimes and remove multiple spaces and split by expected characters
            var parts = input
                .trim()
                .replace(/ +(?= )/g, '')
                .split(/[\s-\/:]/);
            // new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
            return new Date(
                parts[0],
                parts[1] - 1,
                parts[2] || 1,
                parts[3] || 0,
                parts[4] || 0,
                parts[5] || 0
            ); // Note: months are 0-based
        }

        endtime = parseDate(el.dataset.endtime);

        const getRemainingTime = (endtime) => {
            var total = endtime - new Date();
            var seconds = Math.floor((total / 1000) % 60);
            var minutes = Math.floor((total / 1000 / 60) % 60);
            var hours = Math.floor((total / (1000 * 60 * 60)) % 24);
            var days = Math.floor(total / (1000 * 60 * 60 * 24));

            return {
                total,
                days,
                hours,
                minutes,
                seconds,
            };
        };

        const update = () => {
            var t = getRemainingTime(endtime);

            if (t.total <= 0) {
                clearInterval(interval);

                el.querySelector('.days .value').innerText = '0';
                el.querySelector('.hours .value').innerText = '0';
                el.querySelector('.minutes .value').innerText = '0';
                el.querySelector('.seconds .value').innerText = '0';
            } else {
                el.querySelector('.days .value').innerText = t.days.toString();
                el.querySelector('.hours .value').innerText =
                    t.hours.toString();
                el.querySelector('.minutes .value').innerText =
                    t.minutes.toString();
                el.querySelector('.seconds .value').innerText =
                    t.seconds.toString();
            }
        };

        if (endtime) {
            update();
        }

        interval = setInterval(() => update(), 1000);
    });
})();
  • URL: /components/raw/countdown/countdown.js
  • Filesystem Path: src\components\03-molecules\countdown\countdown.js
  • Size: 2.4 KB

No notes defined.