JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="counter">
    <span class="value">20</span> hours
</div>
<p>LTE Browsing Time</p>

<div class="counter">
    <span class="value">4</span> hours
</div>
<p>Charge time</p>

CSS

body{
    font-family: Arial;
    padding: 5em;
    font-size: 90%;
    color: #333;
}
.counter{
    font-size: 2em;
    color: #666;
}
.counter .value{
    font-size: 2em;
}

JavaScript

$('.counter').each(function() {
    var actualValue = 0;
    var value = 0;
    var $value = null;
    var $this = $(this);
    $value = $(this).find('.value');
    value = parseInt($value.text());
    moveCounter();
    
    function moveCounter() {
        $value.text(actualValue);
        actualValue++;
        if (actualValue <= value) {
            setTimeout(moveCounter, 20);
        }
    }
});