JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<script src="http://www.asobal.es/crd/js/jquery.countdown.js"></script>
<div id="contador_tiempo"></div>
Play / pause:
<div class="resume" id="control_pause"></div>
Minute +1:
<div class="more" id="control_min_more"></div>
Minute -1;
<div class="less" id="control_min_less"></div>
Second +1:
<div class="more" id="control_sec_more"></div>
Second -1:
<div class="less" id="control_sec_less"></div>

CSS

.more, .less, .resume, .pause {
    display: block;
    background: url('http://asobal.es/crd/img/sprites.png') no-repeat;
}
.pause {
    background-position: -0px -0px;
    width: 25px;
    height: 28px;
}
.resume {
    background-position: -0px -28px;
    width: 25px;
    height: 28px;
}
.more {
    background-position: -0px -56px;
    width: 26px;
    height: 14px;
}
.less {
    background-position: -0px -70px;
    width: 26px;
    height: 14px;
}

JavaScript

$('#contador_tiempo').countdown({
      since: 0,
      format: 'MS',
      layout: '{mnn}{sep}{snn}'
  });

  $('#contador_tiempo').countdown('pause');

  $('#control_pause').on('click', function () {
      if ($('#control_pause').attr('class') === 'pause') {
          $('#contador_tiempo').countdown('pause');
          $('#control_pause').attr('class', 'resume');
      } else {
          $('#contador_tiempo').countdown('resume');
          $('#control_pause').attr('class', 'pause');
      }
  });
  $('#control_min_more').on('click', function () {
      var minutos = $('#contador_tiempo').countdown('getTimes')[5];
      var segundos = $('#contador_tiempo').countdown('getTimes')[6];
      if (minutos <= 59) {
          minutos += 1;
          $('#contador_tiempo').countdown('resume');
          $('#contador_tiempo').countdown('option', {
              since: '-' + minutos + 'm -' + segundos + 's'
          });
          $('#contador_tiempo').countdown('pause');
      }
  });
  $('#control_min_less').on('click', function () {
      var minutos = $('#contador_tiempo').countdown('getTimes')[5];
      var segundos = $('#contador_tiempo').countdown('getTimes')[6];
      if (minutos !== 0) {
          minutos -= 1;
          $('#contador_tiempo').countdown('resume');
          $('#contador_tiempo').countdown('option', {
              since: '-' + minutos + 'm -' + segundos + 's'
          });
          $('#contador_tiempo').countdown('pause');
      }
  });
  $('#control_sec_more').on('click', function () {
      var minutos = $('#contador_tiempo').countdown('getTimes')[5];
      var segundos = $('#contador_tiempo').countdown('getTimes')[6];
      if (segundos <= 59) {
          segundos += 1;
          $('#contador_tiempo').countdown('resume');
          $('#contador_tiempo').countdown('option', {
              since: '-' + minutos + 'm -' + segundos + 's'
          });
          $('#contador_tiempo').countdown('pause');
      }
  });
 ...