JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script defer src="script.js"></script>
</head>
<body>
<div>
<!--    <label for="from">From: </label>-->
<!--    <input id="from" type="text" min="0">-->
<!--    <label for="to">To:</label>-->
<!--    <input id="to" type="text" min="0">-->
<!--    <label for="sum">Sum: </label>-->
<!--    <input id="sum" type="number">-->

    <select id="from">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>

    <select id="to">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
    <label for="sum">Sum: </label>
    <input id="sum" type="number">
</div>
<div>
    <button id="calculate">Total</button>
</div>
<div id="result">


</div>

</body>
</html>

JavaScript

const from = document.getElementById('from');
const to = document.getElementById('to');
const sum = document.getElementById('sum');
const calculate = document.getElementById('calculate');
const result = document.getElementById('result');
const api_key = '8c054e387fa9a278b92a5e65d6d1883d';
const base_url = 'http://data.fixer.io/api/latest?';

calculate.addEventListener('click', function () {
    const fromCurrency = from.value.trim().toUpperCase();
    const toCurrency = to.value.trim().toUpperCase();
    const sumValue = +sum.value;
    fetch(`${base_url}access_key=${api_key}`)
        .then(response => response.json())
        .then(data => data.rates)
        .then(rates => {
            console.log(Object.keys(rates));
            const res = rates[toCurrency] / rates[fromCurrency] * sumValue;
            const resElem = document.createElement('p');
            const resText = document.createTextNode(`Total: ${res.toFixed(3)}`);
            resElem.append(resText);
                result.append(resElem);
        })
});