How to Build a Real-Time Currency Converter in Webflow

<div>
  <div style="display:flex;gap:12px;margin-bottom:12px;">
    <input type="number" style="flex:1;">
    <select>
      <option>EUR</option>
      <option>USD</option>
      <option>GBP</option>
    </select>
  </div>
  <div style="display:flex;gap:12px;">
    <div style="flex:1;">—</div>
    <select>
      <option>USD</option>
      <option>EUR</option>
      <option>GBP</option>
    </select>
  </div>
</div>

(function() {
  var CURRENCIES = ['EUR','USD','GBP','CHF','CAD','AUD','JPY','AED','MAD','TND'];
  var amountInput = document.getElementById('amount-input');
  var fromSelect = document.getElementById('from-currency');
  var toSelect = document.getElementById('to-currency');
  var result = document.getElementById('converted-amount');
  if (!amountInput || !fromSelect || !toSelect || !result) return;

  // Populate the selects
  [fromSelect, toSelect].forEach(function(sel) {
    var current = sel.value;
    sel.innerHTML = '';
    CURRENCIES.forEach(function(c) {
      var opt = document.createElement('option');
      opt.value = c; opt.textContent = c;
      if (c === current) opt.selected = true;
      sel.appendChild(opt);
    });
  });
  toSelect.value = 'USD';

  var rates = {};

  function convert() {
    var amount = parseFloat(amountInput.value) || 0;
    var from = fromSelect.value;
    var to = toSelect.value;
    if (from === to) { result.textContent = amount.toFixed(2) + ' ' + to; return; }
    if (rates[from] && rates[from][to]) {
      var converted = amount * rates[from][to];
      result.textContent = converted.toFixed(2) + ' ' + to;
    }
  }

  function loadRates(base) {
    if (rates[base]) { convert(); return; }
    result.textContent = 'Loading...';
    fetch('https://api.frankfurter.dev/v1/latest?from=' + base)
      .then(function(r) { return r.json(); })
      .then(function(data) {
        rates[base] = data.rates;
        rates[base][base] = 1;
        convert();
      })
      .catch(function() { result.textContent = 'Loading error'; });
  }

  amountInput.addEventListener('input', convert);
  fromSelect.addEventListener('change', function() { loadRates(fromSelect.value); });
  toSelect.addEventListener('change', convert);

  loadRates('EUR');
})();