JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="block">Российских рублей
    <br>
    <input data-id="1" type="text" data-nominal="1" data-value="1">
</div>
<div class="block">Белорусских рублей
    <br>
    <input data-id="2" type="text" data-nominal="10000" data-value="34.4819">
</div>
<div class="block">Украинских гривен
    <br>
    <input data-id="3" type="text" data-nominal="10" data-value="27.6250">
</div>
<div class="block">Доллар США
    <br>
    <input data-id="4" type="text" data-nominal="1" data-value="72.3775">
</div>
<div class="block">Евро
    <br>
    <input data-id="5" type="text" data-nominal="1" data-value="79.4488">
</div>

CSS

div.block {
    background: #FDFDFD;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5), 0 -1px 0 0 rgba(0, 0, 0, 0.03);
    font-family: arial, sans-serif;
    font-size: 14px;
    margin: 0 10px 10px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}

div.block input {
    background: #FFFFFF;
    border: 1px solid #A5A5A5;
    box-shadow: inset 0 0 8px -2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
    line-height: 24px;
    padding: 0 5px;
    outline: 0 solid transparent;
    text-align: center;
    width: 120px;
}

JavaScript

$(document).on('keyup', '[data-id]', function() {
    var this_id = $(this).data('id'),
        this_nominal = $(this).data('nominal'),
        this_value = $(this).data('value'),
        this_input = $(this).val();

    $('[data-id]').each(function() {
        if ($(this).data('id') != this_id) {
            var each_nominal = $(this).data('nominal'),
                each_value = $(this).data('value'),
                each_input = $(this).val(),
                new_nominal = 0,
                new_input = 0;

            new_nominal = this_value / this_nominal;
            each_nominal = each_value / each_nominal;

            new_input = new_nominal / each_nominal * this_input;
            new_input = new_input.toFixed(2);
            $(this).val(new_input);

        }

    });

});