JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<script src="https://raw.githubusercontent.com/MikeMcl/bignumber.js/master/bignumber.js"></script>
Miles
<input type="text" id="_miles" value="" />
<br />
<br />Amount
<input type="text" id="_amount" value="" />
<br />

JavaScript

// https://github.com/MikeMcl/bignumber.js/
// http://mikemcl.github.io/bignumber.js/

$(function () {
    BigNumber.config({ ERRORS: false });

    var availableMiles = 2000000; // ${form.availableMiles}
    var conversionRate = new BigNumber('0.0075'); // new BigNumber('${form.conversionRate}')
    var maxAmount = getAmountForMiles(availableMiles);

    function getAmountForMiles(miles) {
        return conversionRate.times(miles).round(2);
    }
    
    function getLeastMilesForAmount(amount) {
        return amount.minus('0.005').dividedBy(conversionRate).round(0, BigNumber.ROUND_CEIL).toNumber();
    }

    $('#_miles').keyup(function () {
        var $milesField = $(this);

        function getMiles() {
            var val = $milesField.val().replace(',', '');
            if (val != '') {
                var nbr = new BigNumber(val);
                if (!nbr.isNaN() && nbr.isInteger() && !nbr.isNegative()) {
                    return nbr.toNumber();
                }
            }
            return null; 
        }
        
        var miles = getMiles();
        if (miles != null) {
            if (miles > availableMiles) {
                $milesField.val(availableMiles);
                miles = availableMiles;
            }
            $('#_amount').val(getAmountForMiles(miles).toFixed(2));
        } else {
            $('#_amount').val('');
        }
    });

    $('#_amount').keyup(function () {
        var $amountField = $(this);

        function getAmount() {
            var val = $amountField.val();
            if (val != '') {
                var nbr = new BigNumber(val);
                if (!nbr.isNaN() && nbr.equals(nbr.round(2, BigNumber.ROUND_DOWN))) {
                    return nbr;
                }
            }
            return null; 
        }

        var amount = getAmount();
        if (amount != null) {
            if (amount.greaterThan(maxAmount)) {
                $amountField.val(maxAmount);
                amount =...