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">....loading - Enter value above and press update</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 = undefined,
    currentTip = 0;
  var tipsElem = document.getElementById('tips');
	
  console.log('Formula -> value = (i * values.xValue) + (j * values.yValue)')
  for (i = 0; i <= values.billAmount; i++) {
    for (j = 0; j <= values.billAmount; j++) {
      value = (i * values.xValue) + (j * values.yValue);
      if (value !== 0 && value >= values.billAmount) {
        currentTip = value - values.billAmount;
        if (currentTip === 0) {
				console.log('enter 0')
          tipsElem.innerHTML = currentTip;
          return false; // Tip is 0. Perfecto!
        } else if (finalTip === undefined) {
          finalTip = currentTip;
        } else if (currentTip < finalTip) {
          finalTip = currentTip;
        }
      }
      console.log("i=>", i,"x=>",values.xValue, "| j=>", j, "y=>", values.yValue, ' value=>', value, '| currentTip=>', currentTip)
    }
  }

  tipsElem.innerHTML = finalTip;
}