JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<div id="da-count">We have <span id="da-remain">560</span> keys left in stock.</div>

CSS

#da-count {
    font-family: 'Helvetica', sans-serif;
    font-weight: 300;
    color: #222;
    margin: 12px 0;
}
#da-remain {
    font-weight: 400;
    color: #c99;
}

JavaScript

function daCounter (sum) {
    var daRemain = $("#da-remain");
        daCurrent = parseInt(daRemain.text()),
        daLeft = parseInt(sum),
        daSplit = daCurrent - daLeft;

    var daCount = setInterval(function () {
        daRemain.html(daCurrent - 1);

        daCurrent -= 1;

        if (daCurrent == daSplit) clearInterval(daCount);
    }, 50);
}

// Trigger function after 600 milliseconds
setTimeout(function () {
    daCounter(342);
}, 600);