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

 

 

Welcome folks today in this blog post we will be building a live rate api currency converter of countries in browser using javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<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>

 

See also  JavaScript Program to Compare Two Strings Using localCompare() Method Full Project For Beginners

 

 

style.css

 

 

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;
}

 

See also  How to Delete Files Stored in Google Drive using Google Drive API V3 in Javascript

 

script.js

 

 

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 Reply