Build a Live Rate API Currency Converter of Countries in Browser Using Javascript

Build a Live Rate API Currency Converter of Countries in Browser Using Javascript

<div class="container">
        <div class="currency">
            <select name="" id="input_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" 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" name="" id="input_amount" value="1">
        </div>
        <button id="exchange">
                ↕   
            </button>
        <div class="currency">
            <select name="" id="output_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>
            <input type="number" name="" id="output_amount" placeholder="0"/>
        </div>
        <div class="result">
                <div class="rate" id="rate"></div>

        </div>
        
    </div>
body{
    background-color: rgb(240, 225, 205);
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
}
  
.container{
    height: 500px;
    width: 500px;
    /* background-image: linear-gradient(to bottom left,#a4d1a2,#b1eece ); */
    background-color:#ffffff;
    margin-top: 10vh;
    padding:20px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #000000;
    opacity: 1;
    text-align: center;
    align-content: center;
}

.currency{
    padding-top: 5%;
    padding-bottom: 5%;
    
}

.currency select {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color:transparent;
color: #0e3114;
width : 80px;
height: 32px;
border: none;
border-radius: 5px;
font-size: 1.5rem;
font-weight: bold;

}

.currency input {
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    background-color: transparent;
    color: #192c1e;
    width: 400px;
    height: 40px;
    border: none;
    border-radius: 30px;
    padding:2px;
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 4px;
    
}
.currency select option{
    background-color: #89c095;
    font-size: 1rem;
    color: rgb(20, 41, 26);
    
}

.result {

    display: flex;
    align-items: center;
    justify-content: center;
}

 button#exchange  {
    width: 80px;
    height: 80px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: transparent;
    color:#213a25;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    justify-content: center;
    padding-bottom : 0.3rem;
    border: none;
   /* border: 2px solid #000;*/
    border-radius: 50%;
}

 button#exchange:hover{
    color: #213a25;
    background-color: #569456;
    border: none;
    border-radius: 50%;
}

 button#exchange:active{
}

 .rate{
   
    color: #5f2419;    
    width: 500px;
    height: 35px;
    border-radius: 15px   ;
    border-radius: 35px;
    margin-top: 80px;
    font-weight: 500;
    font-size: 2rem;
    text-align: center;
}

select:focus, input:focus, button:focus {
    outline: 0;
}
const input_currency = document.querySelector('#input_currency');
const output_currency = document.querySelector('#output_currency');
const input_amount = document.querySelector('#input_amount');
const output_amount = document.querySelector('#output_amount');
const exchange = document.querySelector('#exchange');
const rate = document.querySelector('#rate');

input_currency.addEventListener('change', compute);
output_currency.addEventListener('change', compute);
input_amount.addEventListener('input', compute);
output_amount.addEventListener('input', compute);

exchange.addEventListener('click', ()=>{
    const temp = input_currency.value;
    input_currency.value = output_currency.value;
    output_currency.value= temp;
    compute();
});

function compute(){
    const input_currency1 = input_currency.value;
    const output_currency1 = output_currency.value;

    fetch(`https://api.exchangerate-api.com/v4/latest/${input_currency1}`)
    .then(res => res.json())
    .then(res => {
        const new_rate = res.rates[output_currency1];
        rate.innerText = `1 ${input_currency1} = ${new_rate} ${output_currency1}`
        output_amount.value = (input_amount.value * new_rate).toFixed(2);
    })
}

compute();

Leave a Comment