JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<span class="curr_label">FROM</span>
<select id="CURR_FR" class="postfix">
        
        <option value="AED">AED</option>
        
        <option value="AFN">AFN</option>
        
        <option value="ALL">ALL</option>
        
        <option value="AMD">AMD</option>
        
        <option value="ANG">ANG</option>
        
        <option value="AOA">AOA</option>
        
        <option value="ARS">ARS</option>
        
        <option value="AUD">AUD</option>
        
        <option value="AWG">AWG</option>
        
        <option value="AZN">AZN</option>
        
        <option value="BAM">BAM</option>
        
        <option value="BBD">BBD</option>
        
        <option value="BDT">BDT</option>
        
        <option value="BGN">BGN</option>
        
        <option value="BHD">BHD</option>
        
        <option value="BIF">BIF</option>
        
        <option value="BND">BND</option>
        
        <option value="BOB">BOB</option>
        
        <option value="BRL">BRL</option>
        
        <option value="BSD">BSD</option>
        
        <option value="BTN">BTN</option>
        
        <option value="BWP">BWP</option>
        
        <option value="BYR">BYR</option>
        
        <option value="BZD">BZD</option>
        
        <option value="CAD">CAD</option>
        
        <option value="CDF">CDF</option>
        
        <option value="CHF">CHF</option>
        
        <option value="CLP">CLP</option>
        
        <option value="CNY">CNY</option>
        
        <option value="COP">COP</option>
        
        <option value="CRC">CRC</option>
        
        <option value="CUC">CUC</option>
        
        <option value="CVE">CVE</option>
        
        <option value="CZK">CZK</option>
        
        <option value="DJF">DJF</option>
        
        <option value="DKK">DKK</option>
        
        <option value="DOP">DOP</option>
        
        <option value="DZD">DZD</option>
        
       ...

CSS

#result { margin-top: 10px; border: 5px solid #ccc; padding: 10px; }

JavaScript

var from_to;
$('#convert-btn').on('click', function(){
    from_to = $('#CURR_FR').val()+'_'+$('#CURR_TO').val();
    $.ajax({
        'url':'http://www.freecurrencyconverterapi.com/api/v2/convert',
        'dataType':'jsonp',
        'type':'get',
        'data': {
            'q': from_to,
            'compact':'y',
        }
    }).done(function(d){
        $('#result').html( d[from_to].val );    
    });
});