jQuery addClass example

Change class name on click in jQuery

by Reigel Gallarde

HTML

<div class="wrapper">
  <div id="setter">
    <label for="id1"><input type="checkbox" id="id1" data-type="value" value="1">1</label>
    <label for="id2"><input type="checkbox" id="id2" data-type="value" value="2">2</label>
    <label for="id3"><input type="checkbox" id="id3" data-type="value" value="4">3</label>
    <label for="id4"><input type="checkbox" id="id4" data-type="value" value="8">4</label>
    <label for="id5"><input type="checkbox" id="id5" data-type="multiplier" value="2">5</label>
    <label for="id6"><input type="checkbox" id="id6" data-type="multiplier" value="5">6</label>
    <label for="id7"><input type="checkbox" id="id7" data-type="reduce" value="10">7</label>
    <label for="id8"><input type="checkbox" id="id8" disabled value="2:1">8</label>
  </div>

  <div>Timer Display:</div>
  <div id="timer1">slot 1 Peso timer: <span>0</span></div>
  <div id="timer2">slot 5 Peso timer: <span>0</span></div>

  <div id="realtimer">Real Timer Running in Background:
    <div id="timer3">slot 1 Peso timer: <span>0</span></div>
    <div id="timer4">slot 5 Peso timer: <span>0</span></div>
  </div>
</div>

JavaScript

(function($) {

  $(function() {
    $('#realtimer').hide();
    var setter = $('#setter')
    setter.on('change', ':checkbox', function() {
      var checked = setter.find('[data-type="value"]:checked').map(function() {
        return parseInt(this.value)
      }).get();

      time = checked.reduce((a, b) => a + b, 0) + 1;
      var multiplier = setter.find('[data-type="multiplier"]:checked').map(function() {
        return parseInt(this.value);
      }).get();
      multiplier.push(time);
      time = multiplier.reduce((a, b) => a * b, 1);

      $('#timer1 span').text(formatTime(time));
      $('#timer2 span').text(formatTime(time * 5));
      $('#timer3 span').text(formatTime(time - (time * 0.1)));
      $('#timer4 span').text(formatTime((time - (time * 0.1)) * 5));
      $('#realtimer').toggle($('[data-type="reduce"]').is(':checked'));
      console.log(formatTime(time * 60));
    });
    setter.find(':checkbox:first').trigger('change');
  })
})(jQuery)

function formatTime(min) {
  min = parseInt(min) || 0;
  var sec_num = min * 60;
  var hours = Math.floor(sec_num / 3600);
  var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  var seconds = Math.floor(sec_num - (hours * 3600) - (minutes * 60));
  var htext = ''; //hours < 2 ? ' Hour' : ' Hours';
  var mtext = ''; //minutes < 2 ? ' Minute' : ' Minutes';
  var stext = ''; //seconds < 2 ? ' Second' : ' Seconds';

  return twodigits(hours) + htext + ':' + twodigits(minutes) + ':' + mtext + twodigits(seconds) + stext;
}

function twodigits(num) {
  return (num < 10) ? '0' + num : num;
}