MadDoggy calculator

Change class name on click in jQuery

by dzenkovich

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.4.7/cleave.min.js"></script>
<div class="container">
  <h1>
    Калькулятор курьерки
  </h1>
  <p>
    Минимальное вознагрождение 5 000 000 ISK.
  </p>
  <div class="row">
    <div class="form col-xs-6">
      <div class="form-group">
        <div>
          <label class="control-label">Маршрут</label>
        </div>
        <select class="form-control" id="route">
          <option value="1700">
            DL-CDY - TOYOTA -> Jita IV - Moon 4 - Caldari Navy 
          </option>
          <option value="1700">
            Jita IV - Moon 4 - Caldari Navy -> DL-CDY - TOYOTA
          </option>
          <option value="1500">
            D-PNP9 - D-Pyongyang ->  Jita IV - Moon 4 - Caldari Navy
          </option>
          <option value="1500">
            Jita IV - Moon 4 - Caldari Navy ->  D-PNP9 - D-Pyongyang
          </option>
        </select>  
      </div>
      <div class="form-group">
        <div>
          <label class="control-label">Объем (m<sup>3</sup>)</label>
        </div>
        <input class="form-control" type="text" id="volume"/>
      </div>
      <div class="form-group">
        <div>
          <label class="control-label">Залог (isk)</label>
        </div>
        <input class="form-control" type="text" id="collateral"/>
      </div>     
    </div>
    <div class="col-xs-6">
      <div>
        <label>Тариф за 1м<sup>3</sup>:</label>
        <p id="costTariff"></p>
      </div>
      <div>
        <label>Цена за м<sup>3</sup>:</label>
        <p id="costVolume"></p>
      </div>
      <div>
        <label>Цена за залог:</label>
        <p id="costCollateral"></p>
      </div>
      <div>
        <label>Итоговая стоимость:</label>
        <h2 id="result"></h2>
      </div>
    </div>
  </div>
</div>

JavaScript

var $route = $('#route');
var $volume = $('#volume');
var $collateral = $('#collateral');
var $costTariff = $('#costTariff');
var $costVolume = $('#costVolume');
var $costCollateral = $('#costCollateral');
var $result = $('#result');
new Cleave('#volume', {
  numeral: true,
  delimiter: ' ',
  numeralThousandsGroupStyle: 'thousand'
});
new Cleave('#collateral', {
  numeral: true,
  delimiter: ' ',
  numeralThousandsGroupStyle: 'thousand'
});

function format(number) {
	return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$& ');
}

function calculate() {
	var tariff = parseInt($route.val());
  var volume = parseInt($volume.val().replace(/\s/g, ''));
  var collateral = parseInt($collateral.val().replace(/\s/g, ''));
	var costCollateral = '';
  var costVolume = '';
  var minimum = 5000000;
  
  costCollateral = collateral * 0.01 || 0;
  costVolume = tariff * volume || 0;
  result =  Math.max(minimum, costCollateral + costVolume);
  
  $costTariff.html(format(tariff) + ' ISK');
  $costVolume.html(format(costVolume) + ' ISK');
  $costCollateral.html(format(costCollateral) + ' ISK');
  $result.html(format(result) + ' ISK')
}

$route.on('change', calculate);
$volume.on('keyup', calculate).on('blur', calculate);
$collateral.on('keyup', calculate).on('blur', calculate);
calculate();