JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<div id="tip_calculator">
    <div id="bill_amount_container">
        <input type="text" name="bill_amount" id="bill_amount" placeholder="Your Bill Amount" />
    </div>
    <div id="tip_percentage"> <a href="#" class="amount" id="five" data-amount="5">5%</a>
 <a href="#"  class="amount" id="ten" data-amount="10">10%</a>
 <a href="#"  class="amount" id="fifteen" data-amount="15">15%</a>
 <a href="#"  class="amount" id="twenty" data-amount="20">20%</a>
 <a href="#"  class="amount" id="twenty-five" data-amount="25">25%</a>

    </div>
    <div id="you_pay"></div>
</div>

CSS

.clear {
    clear:both
}
a {
    background-color: yellow;
    border-radius: 5px;
    color: black;
    padding: 10px;
    text-decoration: none;
}
a:hover {
    background: black;
    color: white;
}
input[name=bill_amount] {
    background: gray;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 20px;
    padding: 10px;
    text-align: right;
}
#tip_calculator {
    border: 1px solid #000000;
    border-radius: 10px;
    font-family: Arial;
    margin: 0 auto;
    text-align: center;
    padding: 30px;
}
#tip_percentage {
    margin-top: 30px;
}
#you_pay {
    font-size: 30px;
    margin-top: 50px;
}

JavaScript

$(document).ready(function () {

    $('.amount').mouseover(function () {
        var yourBill = $('#bill_amount').val();
        var percent = parseInt($(this).data('amount')) / 100 * yourBill;
        var rounded = percent.toFixed(2)
        $('#you_pay').text('$' + rounded);
    });

    // Back to $0.00
    $('a').mouseout(function () {
        $('#you_pay').text('$0.00');
    });

    // Starts with $0.00
    $('#you_pay').text('$0.00');
});