JSFiddle - React, Tailwind, and code Playground

by Neil Kolban

HTML

<div id="usd">usd</div>
<div id="eur">eur</div>
<div id="clr"></div>
<br>
<br>user quantity 1-200:
<input type="text" id='user-quantity'>
<br>
<br>user quantity total sum
<input type="text" id='total-sum'>

CSS

#usd, #eur {
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    float: left;
}
.greenChacked {
    background-color: olive;
}
#clr {
    clear: both;
}

JavaScript

$(document).ready(function () {
    var userQuantity;
    $('#user-quantity').keyup(function () {
        userQuantity = parseInt($(this).val());
        if (userQuantity >= 1 && userQuantity <= 200) {
            setCurrency();
        } else {
            $('#total-sum').val("error");
        }
    });

    $('#usd').on('click', function () {
        $('#eur').removeClass('greenChacked');
        $(this).addClass('greenChacked');
        setCurrency();
    });
    $('#eur').on('click', function () {
        $('#usd').removeClass('greenChacked');
        $(this).addClass('greenChacked');
        setCurrency();
    });
    $('#usd').trigger('click');

    function setCurrency() {
        if ($('#usd').hasClass('greenChacked')) {
            var usdCurr = userQuantity * 10 + 'doll';
            $('#total-sum').val(usdCurr);
        }
        if ($('#eur').hasClass('greenChacked')) {
            var eurCurr = userQuantity * 5 + 'eur';
            $('#total-sum').val(eurCurr);
        }
    }

});