Tip Calculator

This is an example of a tip calculator.

by Shawn Wood

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div class="card ">
  <div class="card-header bg-primary text-white">
    <h2>Tip Calculator</h2>
  </div>
  <div class="card-body">
    <div class="container">
      <form>
        <div class="row">
          <div class="form-group col-md-6">
            <label class="font-weight-bold" for="tipAmount">Tip Amount:</label>
            <div class="input-group input-group-lg">
              <div class="input-group-prepend">
                <span class="input-group-text font-weight-bold">$</span>
              </div>
              <input type="text" class="form-control large" id="tipAmount" placeholder="Tip Amount" name="tipAmount" value="0" readonly>
            </div>
          </div>
          <div class="form-group col-md-6">
            <label class="font-weight-bold" for="totalAmount">Total Amount:</label>
            <div class="input-group input-group-lg">
              <div class="input-group-prepend">
                <span class="input-group-text font-weight-bold">$</span>
              </div>
              <input type="text" class="form-control" id="totalAmount" placeholder="Check Total" name="totalAmount" value="0" readonly>
            </div>
         ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#billHandler .btn:first-child {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

#billHandler .btn:last-child {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

JavaScript

// Calculate the tip
var calculateTip = function(checkValue, tipValue) {
  if (typeof checkValue === undefined && checkValue === null) {
    checkValue = 0;
  }
  if (typeof tipValue === undefined && tipValue === null) {
    tipValue = 0;
  }
  let thisCheckValue = JSON.parse(checkValue),
    thisTipValue = JSON.parse('0.' + tipValue);
  let thisNewValue = thisCheckValue * thisTipValue;
  return thisNewValue;
};
// Calculate the totals and display
var calculateTotal = function() {
  let thisTipAmount = $('#tipAmount').val(),
    thisTotalAmount = $('#totalAmount').val(),
    thisPeopleNum = JSON.parse($('#people').val()),
    thisTipPercent = $('#tipPercent').val(),
    thisBillHandler = $('#billHandler .btn input[name="calcType"]:checked').val(),
    thisCheckAmount = JSON.parse($('#checkAmount').val());
  let calcTip = calculateTip(thisCheckAmount / thisPeopleNum, thisTipPercent),
    calcValue = 0,
    calcTotal = 0;
  if (thisBillHandler === 'Exact') {
    thisTipAmount = calcTip / thisPeopleNum;
    $('#tipAmount').val(numeral(thisTipAmount).format('0,0.00'));
    calcTotal = thisTipAmount + (thisCheckAmount / thisPeopleNum);
    $('#totalAmount').val(numeral(calcTotal).format('0,0.00'));
  } else if (thisBillHandler === 'RoundTotal') {
    thisTipAmount = calcTip / thisPeopleNum;
    $('#tipAmount').val(numeral(thisTipAmount).format('0,0.00'));
    calcTotal = Math.round(thisTipAmount + (thisCheckAmount / thisPeopleNum));
    $('#totalAmount').val(numeral(calcTotal).format('0,0.00'));
  } else if (thisBillHandler === 'RoundTip') {
    thisTipAmount = Math.round(calcTip / thisPeopleNum);
    $('#tipAmount').val(numeral(thisTipAmount).format('0,0.00'));
    calcTotal = thisTipAmount + (thisCheckAmount / thisPeopleNum);
    $('#totalAmount').val(numeral(calcTotal).format('0,0.00'));
  }
};

$(document).ready(function() {
  // Keypad Event
  $('#inputBtns .btn').on('click', function(event) {
    let thisButton = $(this).attr('data-item'),
      thisAmount =...