JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<div class='left-counter'><span>0</span></div>
<div class='right-counter'><span>0</span></div>

<button type="button" class="punch1">punch 1</button>
<button type="button" class="punch2">punch 2</button>

JavaScript

window.Fighters = (function() {
  var padNum;

  function Fighters(options) {
    var random;
    this.greenFighter = $('.green-fighter');
    this.blueFighter = $('.blue-fighter');
    this.team = $('.green-team, .blue-team');
    this.thumb = $('.thumb');
    random = Math.ceil(Math.random() * 301232);
    $('.punch1').on('click', (function(_this) {
      return function(e) {
        return _this.countUp(random, '.right-counter span', 2222);
      };
    })(this));
    $('.punch2').on('click', (function(_this) {
      return function(e) {
        return _this.countUp(random, '.left-counter span', 2222);
      };
    })(this));
  }

  padNum = function(number) {
    if (number < 10) {
      return '0' + number;
    }
    return number;
  };

  Fighters.prototype.countUp = function(points, selector, duration) {
    $({
      countNumber: $(selector).text()
    }).animate({
      countNumber: points
    }, {
      duration: duration,
      easing: 'linear',
      step: function() {
        $(selector).text(padNum(parseInt(this.countNumber)));
      },
      complete: function() {
        $(selector).text(points);
      }
    });
  };

  return Fighters;

})();
new window.Fighters();