JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page">
    <div data-role="header">
         <h1>Currency Calculator</h1>

    </div>
    <div data-role="content">
        <label for="number">US Dollar:</label>
        <input type="tel" id="number" data-clear-btn="true" placeholder="00.00" />
        <p>Amount Entered:<span class="amount"></span>

        </p>
        <label for="result">1 US Dollar = 0.74 Euro:
            <input type="text" id="result" disabled="disabled" placeholder="Amount in euro" />
        </label>
    </div>
</div>

CSS

.amount {
    color: blue;
}

JavaScript

var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
    $("#result").val("");
}

function addComma(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

$("#number").on("keyup", function (e, v) {
    if ((e.which >= 48) && (e.which <= 57)) {
        number = String.fromCharCode(e.which);
        $(this).val("");
        value.push(number);
        before.push(value[i]);
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }
        var val_final = after.join("") + "." + before.join("");
        $(this).val(addComma(val_final));
        i++;
        $(".amount").html(" " + $(this).val());
        $("#result").val(val_final * 0.74);
    } else {
        resetVal();
    }
});

$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});