<div class="main-box">
  <h1>Currency Converter</h1>

  <div class="cur-box">
    <select class="cur-item-1">
      <option value="AED">AED</option>
      <option value="ARS">ARS</option>
      <option value="AUD">AUD</option>
      <option value="BGN">BGN</option>
      <option value="BRL">BRL</option>
      <option value="BSD">BSD</option>
      <option value="CAD">CAD</option>
      <option value="CHF">CHF</option>
      <option value="CLP">CLP</option>
      <option value="CNY">CNY</option>
      <option value="COP">COP</option>
      <option value="CZK">CZK</option>
      <option value="DKK">DKK</option>
      <option value="DOP">DOP</option>
      <option value="EGP">EGP</option>
      <option value="EUR">EUR</option>
      <option value="FJD">FJD</option>
      <option value="GBP">GBP</option>
      <option value="GTQ">GTQ</option>
      <option value="HKD">HKD</option>
      <option value="HRK">HRK</option>
      <option value="HUF">HUF</option>
      <option value="IDR">IDR</option>
      <option value="ILS">ILS</option>
      <option value="INR">INR</option>
      <option value="ISK">ISK</option>
      <option value="JPY">JPY</option>
      <option value="KRW">KRW</option>
      <option value="KZT">KZT</option>
      <option value="MXN">MXN</option>
      <option value="MYR">MYR</option>
      <option value="NOK">NOK</option>
      <option value="NZD">NZD</option>
      <option value="PAB">PAB</option>
      <option value="PEN">PEN</option>
      <option value="PHP">PHP</option>
      <option value="PKR">PKR</option>
      <option value="PLN">PLN</option>
      <option value="PYG">PYG</option>
      <option value="RON">RON</option>
      <option value="RUB" selected>RUB</option>
      <option value="SAR">SAR</option>
      <option value="SEK">SEK</option>
      <option value="SGD">SGD</option>
      <option value="THB">THB</option>
      <option value="TRY">TRY</option>
      <option value="TWD">TWD</option>
      <option value="UAH">UAH</option>
      <option value="USD">USD</option>
      <option value="UYU">UYU</option>
      <option value="VND">VND</option>
      <option value="ZAR">ZAR</option>
    </select>

    <input type="number" placeholder="1" class="cur-input-1">
  </div>

  <div class="change-box">
    <span class="change-btn"><i class="fas fa-retweet"></i></span>
    <p class="rate-box">0.00</p>
  </div>

  <div class="cur-box">
    <select class="cur-item-2">
      <option value="AED">AED</option>
      <option value="ARS">ARS</option>
      <option value="AUD">AUD</option>
      <option value="BGN">BGN</option>
      <option value="BRL">BRL</option>
      <option value="BSD">BSD</option>
      <option value="CAD">CAD</option>
      <option value="CHF">CHF</option>
      <option value="CLP">CLP</option>
      <option value="CNY">CNY</option>
      <option value="COP">COP</option>
      <option value="CZK">CZK</option>
      <option value="DKK">DKK</option>
      <option value="DOP">DOP</option>
      <option value="EGP">EGP</option>
      <option value="EUR" selected>EUR</option>
      <option value="FJD">FJD</option>
      <option value="GBP">GBP</option>
      <option value="GTQ">GTQ</option>
      <option value="HKD">HKD</option>
      <option value="HRK">HRK</option>
      <option value="HUF">HUF</option>
      <option value="IDR">IDR</option>
      <option value="ILS">ILS</option>
      <option value="INR">INR</option>
      <option value="ISK">ISK</option>
      <option value="JPY">JPY</option>
      <option value="KRW">KRW</option>
      <option value="KZT">KZT</option>
      <option value="MXN">MXN</option>
      <option value="MYR">MYR</option>
      <option value="NOK">NOK</option>
      <option value="NZD">NZD</option>
      <option value="PAB">PAB</option>
      <option value="PEN">PEN</option>
      <option value="PHP">PHP</option>
      <option value="PKR">PKR</option>
      <option value="PLN">PLN</option>
      <option value="PYG">PYG</option>
      <option value="RON">RON</option>
      <option value="RUB">RUB</option>
      <option value="SAR">SAR</option>
      <option value="SEK">SEK</option>
      <option value="SGD">SGD</option>
      <option value="THB">THB</option>
      <option value="TRY">TRY</option>
      <option value="TWD">TWD</option>
      <option value="UAH">UAH</option>
      <option value="USD">USD</option>
      <option value="UYU">UYU</option>
      <option value="VND">VND</option>
      <option value="ZAR">ZAR</option>
    </select>

    <input type="number" placeholder="0" class="cur-input-2">
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, skyblue, steelblue);
  font-family: helvetica;
  color: #222;
}

.main-box {
  width: 320px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(lightgreen, darkgreen);
  border-radius: 6px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}

h1 {
  font-size: 1.8em;
  text-shadow: 1px 1px #ddd;
  user-select: none;
}

.cur-box {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

select {
  padding: 0.2em;
  font-family: inherit;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

input {
  padding: 0.2em;
  font-family: inherit;
  font-size: 1em;
  width: 100px;
  text-align: center;
  border: none;
  border-radius: 3px;
}

.change-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  text-align: center;
  color: #ddd;
}

.fa-retweet {
  font-size: 1.6em;
  transition: 0.4s;
  cursor: pointer;
}

.rotate-btn {
  transform: rotate(180deg);
}
const curItem1 = document.querySelector(".cur-item-1");
const curItem2 = document.querySelector(".cur-item-2");
const curInput1 = document.querySelector(".cur-input-1");
const curInput2 = document.querySelector(".cur-input-2");

const rateBox = document.querySelector(".rate-box");
const changeBtn = document.querySelector(".fa-retweet");

function calc() {
  const curItem1Value = curItem1.value;
  const curItem2Value = curItem2.value;

  fetch(`https://api.exchangerate-api.com/v4/latest/${curItem1Value}`)
    .then((res) => res.json())
    .then((data) => {
      const rate = data.rates[curItem2Value];

      rateBox.textContent = `1 ${curItem1Value} = ${rate.toFixed(
        4
      )} ${curItem2Value}`;

      curInput2.value = (curInput1.value * rate).toFixed(2);
    });
}

function listeners() {
  curItem1.addEventListener("change", calc);
  curItem2.addEventListener("change", calc);
  curInput1.addEventListener("input", calc);
  curInput2.addEventListener("input", calc);

  changeBtn.addEventListener("click", () => {
    [curItem1.value, curItem2.value] = [curItem2.value, curItem1.value];
    calc();
    changeBtn.classList.toggle("rotate-btn");
  });
}

window.onload = () => {
  listeners();
  calc();
};
Run Pen

External CSS

  1. https://pro.fontawesome.com/releases/v5.10.0/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.