JSFiddle - React, Tailwind, and code Playground

Percentage calculation after entering amount

by Jennifer Perrin

HTML

<span>Input Amount:</span>

<input class="amount" placeholder="Enter Amount...">
<br />
<span>Answer:</span> 
<input class="result">
<br />
<span>Remainder:</span> 
<input class="remainder">

CSS

* {
    font-family:Sans-Serif;
}
span {
    margin:10px;
    font-size:32px;
}
input {
    font-size:32px;
    margin-top:10px;
    padding:10px;
}

JavaScript

$(document).ready(function () {
    function calcValues() {
        x = 0.85;
        y = 0.15;
        z = $('.amount:input').val();
        calcTotal = x * z;
        total = Math.round(calcTotal * 100) / 100;
        calcRemainder = y * z;
        remainder = Math.round(calcRemainder * 100) / 100;
    }

    $('.amount:input').on('keyup', function () {
        calcValues();
        $('.result:input').val('$' + total);
        $('.remainder:input').val('$' + remainder);
    });
});