Real quote with JavaScript
Tags: api, json, html, javascript
Published: 2020-10-22 14:59:42

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/cota%C3%A7%C3%A3o-do-real-com-javascript-ec6f73d29df4)

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.

```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.

```javascript
"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.

```javascript
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.

```javascript
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.

{% codepen https://codepen.io/WalterNascimento/pen/oNLjEmr %}

## Youtube

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

{% youtube HNd8a-2ScFI %}

***

## 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! 😊😊