JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<h1>Restaurant Bill Calculator</h1>
<br>
<form name="billcalculator" method=post onsubmit="calculateBill()">
    <div class="wrapper">
        <label for="tax">Tax Percent:</label>
        <input type="number" id="taxPercent" min="0" max="100" step=".01">%
        <br>
        <label for="price">Price from the menu:</label>
        <input type="number" id="menuPrice" min="0" max="1000" step=".01">
        <br>
        <label for="tip">Tip Percent:</label>
        <input type="number" id="tipPercent" min="0" max="200" step=".01">%
        <br>
        <input type="submit" onclick="calculateBill()" id="submit" value="Calculate Bill">
        <br>
    </div>
</form>
<p id="display">Please click Calculate Bill after completing form.</p>
<script>
    function calculateBill() {
        var tax = document.getElementById("taxPercent")
        var price = document.getElementById("menuPrice")
        var tip = document.getElementById("tipPercent")
        var taxamount = price * tax;
        var tipamount = price * tip;
        var total = taxamount + tipamount + price;

        if (!tax.checkValidity()) {
            window.alert(tax.validatonMessage);
        }
        if (!price.checkValidity()). {
            window.alert(price.validationMessage);
        }
        if (!tip.checkValidity()) {
            window.alert(tip.validationMessage);
        }
        if (tax.checkValidity() && price.checkValidity() && tip.checkValidity()) {
            document.getElementById("display").innerHTML = "Price: $" + price.toFixed(2) + "\n" + "Tax: $" + taxamount.toFixed(2) + "\n" + "Tip: $" + tip.toFixed(2) + "\n" + "Total: $" + total.toFixed(2);
        }
        return true;
    }