JSFiddle - React, Tailwind, and code Playground

by Mark Polyakov

HTML

<h2>Tip Calculator</h2>
    <form action="">
        <table border="0">
            <tr><td>Bill:</td><td><input type="text" name="bill" value="0" onchange="figureTip();" /></td></tr>
            <tr><td>Tip %</td><td><input type="text" name="tip_percent" value="0" onchange="figureTip();" /> (enter as a whole number)</td></tr>
            <tr><td># of People:</td><td><input type="text" name="num_people" value="1" onchange="figureTip();" /></td></tr>
            <tr><td>Tip amount:</td><td><input type="text" name="tip_amount" value="0" readonly="readonly" /></td></tr>
            <tr><td>Total:</td><td><input type="text" name="total" value="0" readonly="readonly" /></td></tr>
            <tr><td>Total per Person:</td><td><input type="text" name="total_person" value="0" readonly="readonly" /></td></tr>
        </table>
    </form>

JavaScript

function figureTip() {
    var bill = document.forms[0].bill.value;
    var tipPercent = document.forms[0].tip_percent.value;
    var numPeople = document.forms[0].num_people.value;
    var tipAmount = Math.round(bill * ("." + tipPercent));
    var total = Math.round(bill * (1 + "." + tipPercent));
    var totalPerPerson = Math.round(total / numPeople);
    document.forms[0].tip_amount.value = tipAmount.toLocaleString();
    document.forms[0].total.value = total.toLocaleString();
    document.forms[0].total_person.value = totalPerPerson.toLocaleString();
}