JSFiddle - React, Tailwind, and code Playground

by Nevin Madhukar

HTML

<div>
  <br/> X:
  <input id='first' type="number" name="FirstDenomination" value="0">
  <br> Y:
  <input id='second' type="number" name="SecondDenomination" value="0">
  <br>Bill Amount:
  <input id='bill' type="number" name="SecondDenomination" value="0">
  <br>

  <input id='find' onclick='reduceTips()' type='button' value="Update" />

  <h3>TIPS:</h3>
  <h4 id="tips">TEST TIPS</h4>
  <br>

</div>

CSS

div {
  font-size: 13px;
}

input {
  margin: 10px;
  width: 50px;
}

#find {
  width: 100%;
}

JavaScript

window.getElementValues = function() {
  var x = document.getElementById('first');
  var y = document.getElementById('second');
  var bill = document.getElementById('bill');
  var billAmount = bill.value
  var xValue = x.value;
  var yValue = y.value;
  return {
    xValue: xValue,
    yValue: yValue,
    billAmount: billAmount,
  }
}

window.reduceTips = function() {
  var values = getElementValues();
	var finalTip, currentTip;

  for (i = 0; i <= values.billAmount; i++) {
    for (j = 0; j <= values.billAmount; j++) {
      value = (i * values.xValue) + (j * values.yValue);
      if (value >= values.billAmount) {
        currentTip = values.billAmount - value;
        if (currentTip === 0) {
          return 0; // Tip is 0. Perfecto!
        }
        if (currentTip > finalTip) {
          finalTip = currentTip;
        }
      }
    }
  }
	
var tipsElem = 
document.getElementById('tips').html = finalTip;
  return finalTip;

}