JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/odometer-theme-plaza.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/odometer.min.js" defer></script>

<style>
    .odometer.odometer-auto-theme,
    .odometer.odometer-theme-plaza {
        font-size: 35px;
        font-family: "Rubik", sans-serif;
        font-weight: 600;
    }

    .odometer.odometer-auto-theme .odometer-digit,
    .odometer.odometer-theme-plaza .odometer-digit {
        color: #444;
        border: 1px solid #ddd;
    }

    .unitCounter {
        font-size: 32px;
        font-family: "Rubik", sans-serif;
        font-weight: 600;
        vertical-align: middle;
        color: #555;
        margin-left: 3px;
    }

</style>

<div><span id="odometer2" class="odometer2"></span><span class="unitCounter">€</span></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {

        var initial = 2600000000;
        var t2 = new Date(2019, 02, 14, 0, 0, 0, 0); // Javascript reference date (March 14th: month -1)
        var incrementPerSecond = 20;

        var el = document.querySelector('.odometer2');

        odometer = new Odometer({
            el: el,
            value: initial,
            format: '(.ddd),dd',
            duration: 2000
        });

        var secondsSinceRef = function() {
            var t1 = new Date();

            var dif = t1.getTime() - t2.getTime();
            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
            return parseInt(Seconds_Between_Dates);
        };

        var current = initial + (secondsSinceRef() * incrementPerSecond);

        odometer.update(current);

        setInterval(function() {
            current = current + (incrementPerSecond * 2);
            odometer.update(current);
        }, 2000);

    });

</script>