In this article, we will implement a currency converter that simply converts the currency into any other country’s currency.
Pre-requisites:
- Basic HTML, CSS, JavaScript.
Approach:
- HTML code is implemented for GUI for user entries of the amount and two currencies.
- Select the currency, Convert button displays the converted amount.
- The Reset button resets the data.
- JavaScript functions and custom methods are used for implementing currency conversion like addEventListener().
- Currency exchange API is used in the script file.
HTML code: The following HTML code implements the GUI for user entries like amount and both the currencies for which the conversion needs to take place.
Add code in index.html.
CSS code: The following is the content for the file “style.css”.
JavaScript code: The following is the content for the file “script.js” used in the above HTML code.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Currency Converter</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< link rel = "preconnect"
href =
< link href =
rel = "stylesheet" >
<!-- linking style.css file-->
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
<!-- Currency Converter -->
< h1 class = "heading text-center display-2" >
Currency Converter
</ h1 >
< hr >
< div class = "container" >
< div class = "main" >
< div class = "form-group" >
< label for = "oamount" >
Amount to Convert :
</ label >
< input type = "text" class = "form-control searchBox" placeholder = "0.00" id = "oamount" >
</ div >
< div class = "row" >
< div class = "col-sm-6" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" >From</ span >
</ div >
< select class = "form-control from" id = "sel1" >
< option value = "" >Select One …</ option >
< option value = "USD" >USD</ option >
< 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 = "MVR" >MVR</ 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 = "UYU" >UYU</ option >
< option value = "ZAR" >ZAR</ option >
</ select >
</ div >
</ div >
< div class = "col-sm-6" >
< div class = "input-group mb-3" >
< div class = "input-group-prepend" >
< span class = "input-group-text" >To</ span >
</ div >
< select class = "form-control to" id = "sel2" >
< option value = "" >Select One …</ option >
< option value = "USD" >USD</ option >
< 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 = "MVR" >MVR</ 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 = "UYU" >UYU</ option >
< option value = "ZAR" >ZAR</ option >
</ select >
</ div >
</ div >
</ div >
< div class = "text-center" >
<!-- convert button -->
< button class = "btn btn-primary convert m-2" type = "submit" >
Convert
</ button >
<!-- reset button -->
< button class = "btn btn-primary m-2" onclick = "clearVal()" >
Reset
</ button >
</ div >
</ div >
< div id = "finalAmount" class = "text-center" >
<!-- Display the converted amount -->
< h2 >Converted Amount :
< span class = "finalValue" style = "color:green;" >
</ span >
</ h2 >
</ div >
</ div >
<!-- linking script.js file -->
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
body { background-color : aliceblue;
background-position : center ;
background- size : cover;
background-attachment : fixed ;
background-repeat : no-repeat ;
} .heading { font-family : 'Pacifico' , cursive ;
margin : 35px auto 20px ;
} hr { border-top : 2px solid black ;
width : 40% ;
margin-bottom : 55px ;
} .main { width : 50 vw;
margin : auto ;
padding : 30px ;
border-radius: 5px ;
background-color : rgba( 0 , 0 , 0 , 0.5 );
color : white ;
} label { font-size : 20px ;
} .btn { width : 200px ;
} #finalAmount { font-family : 'Lobster' , cursive ;
display : none ;
margin : 50px auto ;
} #finalAmount h 2 {
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 h 2 ,
.finalValue {
font-size : 40px ;
}
} |
Javascript
// Include api for currency change // For selecting different controls let search = document.querySelector( ".searchBox" );
let convert = document.querySelector( ".convert" );
let fromCurrecy = document.querySelector( ".from" );
let toCurrecy = document.querySelector( ".to" );
let finalValue = document.querySelector( ".finalValue" );
let finalAmount = document.getElementById( "finalAmount" );
let resultFrom; let resultTo; let 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 conversion 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 = "" ;
}; |
Output: