Stats Counter

stat_counter.js

const statfigures = document.querySelectorAll('[data-stats]');
if (statfigures.length) {
  statfigures.forEach((el) => {
    const initialValue = el.innerText;
    let statNumber = parseFloat(initialValue.replace(/[^0-9.]/g, ""));
    console.info(statNumber);
    el.innerText = "0";
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            updateStats(el, statNumber, initialValue);
          }
        });
      }
    );
    observer.observe(el);
  });
}

const updateStats = (el, stat, initialValue) => {
    let initial = 1;
    let adjust = Math.ceil(stat / 12) || 1;
    let decimal = 0;
    // test decimal place for stats
    if (stat % 1 !== 0) {
      initial = 0.1;
      adjust = stat / 12;
      decimal = 1;
    }
    const interval = setInterval(() => {
      if (initial < stat) {
        if (initial + adjust < stat) {
          initial += adjust;
        } else {
          initial = stat;
        }
        const formatted = initial.toFixed(decimal);
        // replace the initialValue with the formatted number
        el.innerText = initialValue.replace(
          stat.toString(),
          formatted.toString(),
        );
      } else {
        clearInterval(interval);
        el.innerText = initialValue;
      }
    }, 100);
};