JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' id='amount' name='amount'/>
<select id='currency_from'>
    <option value='EUR'>EUR</option>
    <option value='USD'>USD</option>
    <option value='DKK'>DKK</option>
</select>
IN
<select id='currency_to'>
    <option value='EUR'>EUR</option>
    <option value='USD'>USD</option>
    <option value='DKK'>DKK</option>
</select>
<input type='button' value='Convert' id='convert'>

Result: <span id='result'></span>

CSS

input, select { width: 60px; }
#result {border-bottom: 4px double black;}

JavaScript

jQuery.support.cors = true;
$("#convert").click(function() {
    var currency_from = $("#currency_from option:selected").prop('value');
    var currency_to = $("#currency_to option:selected").prop('value');
    var amount = $("#amount").prop('value');
    changeCurrency(amount, currency_from, currency_to);
});

function changeCurrency(amount, currency_from, currency_to) {
    var query = "select%20*%20from%20yahoo.finance.xchange%20where%20pair='" + currency_from + currency_to + "'";
    var urlservice = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    $.ajax({
        type: "GET",
        url: urlservice,
        dataType: "xml",
        success: function(xml) {

            $(xml).find('rate').each(function() {
                var rate = $(this).find('Rate').text();
                var result = Math.round(amount * rate * 100) / 100 ;
                $("#result").html(result + currency_to);
            });
        },
        error: function(xhr, status, error) {
            $.jGrowl(xhr + ' ' + status + " " + error);

        }
    });
}