<body>

    <h1>Awesome Currency Converter</h1>
    <p class="convert">
        Convert :
        <input type="number" id="original-currency-amount" placeholder="0" value="1"> </input>
    </p>
    <div>
          <select id="from_currency">
      <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">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" selected>USD</option>
      <option value="UYU">UYU</option>
      <option value="VND">VND</option>
      <option value="ZAR">ZAR</option>
    </select>
      <button id="exchange">
      <i class="fas fa-exchange-alt"></i>
    </button>
        <select id="to_currency"><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" selected>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>
    </div>
    <p class="exchange">
        Exchange Rate:
        
        <input type="text" id="exchange-rate" ></input>
    </p>
    <button id="exchange_button">Exchange my money now!</button>
    <p id="output-text">
        <span id="from"></span> converted to <span id="to"></span>
    </p>

    <footer><a href=" https://twitter.com/intent/tweet?text=Awesome Currency Converter 🤑%0a    by @verreauxblack%0ahttps://verreauxblack.biz/project/currency-convertor/" title="share"><i class="fab fa-twitter"></i></a></footer>
    </body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap');

html, body {
    margin: 0;
    padding: 0;
}

body {
  text-align: center;
    font-family: sans-serif;
    background-color: #00539CFF;
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

h1{
    color: #FFD662FF;
    font-size: 3rem;
    
}

.convert,.exchange{
    font-family: 'Sansita Swashed', cursive;
    font-size: 25px;
    color: #ffffff;
    padding-right: 20px;
}

input {
  width: 150px;
  height: 30px;
  font-size: 20px;
    margin: 5px auto;
    outline: 0;
}

#original-currency-amount{
    padding-left: 50px;
}
button {
  width: 300px;
  height: 40px;
    font-size: 20px;
    font-weight: 600;
    color: #00539CFF;
    font-family: 'Sansita Swashed', cursive;
}

select{
  width: 80px;
  height: 35px;
  font-size: 20px;
  text-align: center;
  padding-left: 10px;
  outline: 0;
}

#exchange{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 20px;
    outline: 0;
    color: #00539CFF;
    border: 4px solid #FFD662FF;

}

#exchange:active, button:active {
  transform: scale(0.9);
}

#output-text{
    display: none;
    padding: 20px;
    font-size: 30px;
    color: #ffffff;
}

span{
    color: #FFD662FF;

    font-size: 35px;
}

#exchange-rate{
    cursor:default;
}

footer{
    position: absolute;
    right: 50px;
    bottom: 50px;
}

a{
    color: #ffffff;
    bottom: 0;
    font-size: 30px;
    text-decoration: none;
}

var input_amount = document.getElementById("original-currency-amount");
var from_currency = document.getElementById("from_currency");
var to_currency = document.getElementById("to_currency");
var exchange_rate = document.getElementById("exchange-rate");
var exchange = document.getElementById("exchange");
var output_amount = document.getElementById("output-text");
var output_from = document.getElementById("from");
var output_to = document.getElementById("to");


exchange.addEventListener("click",()=>{
    [from_currency.value, to_currency.value] = [to_currency.value, from_currency.value];
    calculate();
})

var to_amount = 0;
function calculate(){
    const from_currency_value = from_currency.value;
    const to_currency_value = to_currency.value;
    
    fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency_value}`)
    .then(res => res.json())
    .then(res => {
        const rate = res.rates[to_currency_value];
        exchange_rate.value = `${rate}`
        to_amount = (input_amount.value * rate).toFixed(3);
        output_from.innerText= `${input_amount.value} ${from_currency_value}`;
        output_to.innerText = `${to_amount} ${to_currency_value}`;
        output_amount.style.display="block";
    })
}


document.getElementById("exchange_button").addEventListener("click",()=>{
    calculate();
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.