Currency Convertor | Dollar to Rupee convertor
Currency Convertor | Dollar to Rupee convertor
Currency Converter body { background-color: coral; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .heading { font-family: ‘Verdana’, sans-serif; margin: 35px auto 20px; } hr { border-top: hidden; width: 40%; margin-bottom: 55px; } .main { width: 40vw; margin: auto; padding: 1px; border-radius: 5px; background-color: rgba(34, 49, 63, 1); color: white; } label { font-size: 20px; } .btn { width: 100px; } #finalAmount { font-family: ‘Lobster’, cursive; display: none; margin: 50px auto; } #finalAmount h2 { font-size: 50px; } .finalValue { font-family: ‘Amiri’, serif; } @media (max-width: 768px) { hr { width: 60%; } .main { width: 100%; } } @media (max-width: 400px) { .heading { font-size: 60px; } hr { width: 75%; } #finalAmount h2, .finalValue { font-size: 40px; } }
Currency Converter
Amount to Convert :
From
Select One … USD AED ARS AUD BGN BRL BSD CAD CHF CLP CNY COP CZK DKK DOP EGP EUR FJD GBP GTQ HKD HRK HUF IDR ILS INR ISK JPY KRW KZT MVR MXN MYR NOK NZD PAB PEN PHP PKR PLN PYG RON RUB SAR SEK SGD THB TRY TWD UAH UYU ZAR
To
Select One … USD AED ARS AUD BGN BRL BSD CAD CHF CLP CNY COP CZK DKK DOP EGP EUR FJD GBP GTQ HKD HRK HUF IDR ILS INR ISK JPY KRW KZT MVR MXN MYR NOK NZD PAB PEN PHP PKR PLN PYG RON RUB SAR SEK SGD THB TRY TWD UAH UYU ZAR
Convert Reset
Converted Amount :
// include api for currency change const api = “https://api.exchangerate-api.com/v4/latest/USD"; // for selecting different controls var search = document.querySelector(".searchBox”); var convert = document.querySelector(".convert"); var fromCurrecy = document.querySelector(".from"); var toCurrecy = document.querySelector(".to"); var finalValue = document.querySelector(".finalValue"); var finalAmount = document.getElementById(“finalAmount”); var resultFrom; var resultTo; var searchValue; // Event when currency is changed fromCurrecy.addEventListener(‘change’, (event) => { resultFrom = `${event.target.value}`; }); // Event when currency is changed toCurrecy.addEventListener(‘change’, (event) => { resultTo = `${event.target.value}`; }); search.addEventListener(‘input’, updateValue); // function for updating value function updateValue(e) { searchValue = e.target.value; } // when user clicks, it calls function getresults convert.addEventListener(“click”, getResults); // function getresults function getResults() { fetch(`${api}`) .then(currency => { return currency.json(); }).then(displayResults); } // display results after convertion function displayResults(currency) { let fromRate = currency.rates[resultFrom]; let toRate = currency.rates[resultTo]; finalValue.innerHTML = ((toRate / fromRate) * searchValue).toFixed(2); finalAmount.style.display = “block”; } // when user click on reset button function clearVal() { window.location.reload(); document.getElementsByClassName(“finalValue”).innerHTML = “”; };