Real quote with JavaScript

[Clique aqui para ler em português]

To know the currency prices, we always need to go after some sites that display this information, but now, I will create a simple interface that brings this data in a simple and quick way.

Code

First we will create the interface, we will do something simple, using only HTML.

<span id="tax_info"></span>
<div>
  <select id="from_currency"></select>
  <input type="number" id="from_ammount" value="1" />
</div>
<button id="swap"> ⇅ </button>
<div>
  <select id="to_currency"></select>
  <input type="number" id="to_ammount" />
</div>

In the html structure, we have a span that will show the value of the currencies, two select that will list the currencies with two inputs where the value will be calculated and a button and swap to change the values of the select.

Now let’s start the JavaScript part.

"use strict";

const label_from_currency = document.getElementById('from_currency');
const input_from_ammount = document.getElementById('from_ammount');
const label_to_currency = document.getElementById('to_currency');
const input_to_ammount = document.getElementById('to_ammount');

const tax_info = document.getElementById('tax_info');
const swap = document.getElementById('swap');

label_from_currency.addEventListener('change', calculate);
input_from_ammount.addEventListener('input', calculate);
label_to_currency.addEventListener('change', calculate);
input_to_ammount.addEventListener('input', calculate);
swap.addEventListener('click', infoSwap);

main();

Here we have the function calls, first we map all the elements that will be manipulated and then we add the events of change, input and click, and finally we execute the main function.

function main() {
  let currency = { "BRL": "Real", "EUR": "Euro", "USD": "Dollar" };
  let options = [];
  for (var [key, value] of Object.entries(currency)) {
    options.push(`<option value='${key}'>${value}</option>`);
  }
  label_from_currency.innerHTML = options.join('\n');
  label_to_currency.innerHTML = options.join('\n');
  calculate();
}

function infoSwap() {
  let temp = label_from_currency.value;
  label_from_currency.value = label_to_currency.value;
  label_to_currency.value = temp;
  calculate();
}

In the main function we have the currency variable which is a json with the attributes and values that will be displayed in the select, using a for is created the option of the select and then using the innerHTML we add the option in the select.

In the infoSwap function, we simply exchange values from one select to another.

async function getURL(url) {
  return (await fetch(url)).json();
}

function getInfoSelect(select) {
  return select.options[select.selectedIndex].text;
}

async function calculate() {
  let from = label_from_currency.value;
  let to = label_to_currency.value;
  let { rates } = await getURL(`https://api.exchangerate-api.com/v4/latest/${from}`);
  let rate = rates[to];
  tax_info.innerText = `1 ${getInfoSelect(label_from_currency)} = ${rate} ${getInfoSelect(label_to_currency)}`
  input_to_ammount.value = (input_from_ammount.value * rate).toFixed(2);
}

Here we have two auxiliary functions (getURL and getInfoSelect), the function getURL is a function that will make a request to the informed url and the function getInfoSelect is a function used only to return the select text.

The last function is to calculate, this is the one to make the request to the exchangerate api and when returning the data and printed on the screen.

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊