JSFiddle - React, Tailwind, and code Playground
HTML
ConversĂŁo de USD em EUR
<section>
<div>Qual a quantidade?</div>
<div>
<input type="text" id="quantidade" />
</div>
<div>De:</div>
<div>
<select id="de">
<option value="BRL">Reais Brazileiros - BRL</option>
<option selected="selected" value="USD">United States Dollars - USD</option>
<option value="EUR">Euro - EUR</option>
<option value="GBP">United Kingdom Pounds - GBP</option>
<option value="CAD">Canada Dollars - CAD</option>
<option value="AUD">Australia Dollars - AUD</option>
<option value="JPY">Japan Yen - JPY</option>
<option value="INR">India Rupees - INR</option>
<option value="NZD">New Zealand Dollars - NZD</option>
<option value="CHF">Switzerland Francs - CHF</option>
</select>
</div>
<div>Para:</div>
<div>
<select id="para">
<option value="BRL">Reais Brazileiros - BRL</option>
<option selected="selected" value="USD">United States Dollars - USD</option>
<option value="EUR">Euro - EUR</option>
<option value="GBP">United Kingdom Pounds - GBP</option>
<option value="CAD">Canada Dollars - CAD</option>
<option value="AUD">Australia Dollars - AUD</option>
<option value="JPY">Japan Yen - JPY</option>
<option value="INR">India Rupees - INR</option>
<option value="NZD">New Zealand Dollars - NZD</option>
<option value="CHF">Switzerland Francs - CHF</option>
</select>
</div>
<div>
<button type="button">Converter</button>
</div>
<div id="resultado"></div>
</section>
CSS
div {
height:30px;
min-width:50px;
}
div:nth-child(odd) {
float:left;
}
div:nth-child(even) {
float:right;
}
section {
width:300px;
margin:auto;
}
JavaScript
$(document).on('ready', function () {
$('button').on('click', function () {
var quantidade = $('#quantidade').val();
var de = $('#de').val();
var para = $('#para').val();
fazerRequest(quantidade, de, para);
});
});
var fazerRequest = function (valor,origem,destino) {
$.ajax({
type: "GET",
url: "http://rate-exchange.appspot.com/currency?from=" + origem + "&to=" + destino + "&q=" + valor,
dataType: "jsonp",
success: function (response) {
$('#resultado').html(response.v + ' ' + destino);
}
});
}