JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<form>
    <p style="line-height: 18px;">I want to sell
        <input type="text" value="1" maxlength="5" class="number" />
        <select id="dropdown" name="dropdown" class="dropdown">
            <option value="Select" selected="selected">Choose your fruit</option>
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="pineapple">Pineapple</option>
        </select>
        <input type="button" class="update" value="Calculate" />
    </p>
</form>
<p style="line-height: 18px; margin-left:80px;">
    <input type="text" value="1" maxlength="5" class="number" />
    <select id="dropdown" name="dropdown" class="dropdown">
        <option value="Select" selected="selected">Choose your fruit</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="pineapple">Pineapple</option>
    </select>
    <input type="button" class="update" value="Calculate" />
    </form>
    <div id="apple" class="fruit">
        <ul>
            <li style="color:#555;">Result</li>
            <li> <span data-val="1"></span>Apples</li>
            <li> <span data-val="0.5"></span>Bananas</li>
            <li> <span data-val="8"></span>Pineapples</li>
        </ul>
    </div>
    <div id="banana" class="fruit">
        <ul>
            <li style="color:#555;">Result</li>
            <li> <span data-val="2"></span>Apples</li>
            <li> <span data-val="1"></span>Bananas</li>
            <li> <span data-val="16"></span>Pineapples</li>
        </ul>
    </div>
    <div id="pineapple" class="fruit">
        <ul>
            <li style="font-weight:bold; color:#555;">Result</li>
            <li> <span data-val="0.125"></span>Apples</li>
            <li> <span data-val="0.0625"></span>Bananas</li>
            <li> <span data-val="1"></span>Pineapples</li>
        </ul>
    </div>
    <div class="values">
        <ul>
            <li>Apples <span...

CSS

ul {
    list-style-type:none
}
.content {
    color:#cac8a2;
    text-align:center;
    font-size:20px;
    margin:auto;
    padding-top: 100px;
}
.table {
    margin:auto;
    text-align:left;
    width;
    400px;
    font-family:"Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
    float:center;
}

.values {display : none}

JavaScript

$(document).ready(function () {
    var fruits = {
        apple: {
            apple: 1,
            banana: 0.5,
            pineapple: 8
        },
        banana: {
            apple: 2,
            banana: 1,
            pineapple: 16
        },
        pineapple: {
            apple: 0.125,
            banana: 0.0625,
            pineapple: 1
        }
    };

    function showTab(name) {
        $('div.fruit').hide();
        var $div = $('#' + name).show();
        var number = parseInt($('.number').val(), 0);
        $('span', $div).each(function () {
            $(this).text(($(this).data('val') * number).toFixed(3));
        });
    }

    $('.update').click(function () {
        var vals = {
            apple: 0,
            banana: 0,
            pineapple: 0
        };

        $('.dropdown').each(function () {
            var fruitVal = $(this).prev('.number').val();
            if (fruits[$(this).val()]) {
                vals.apple += fruitVal * fruits[$(this).val()].apple;
                vals.banana += fruitVal * fruits[$(this).val()].banana;
                vals.pineapple += fruitVal * fruits[$(this).val()].pineapple;
            }
        });
        
        $('.apple').text(vals.apple);
        $('.banana').text(vals.banana);
        $('.pineapple').text(vals.pineapple);
        $('.values').show();
    });

    showTab($('#dropdown').val());
});