Hey friends, today in this blog, you’ll learn how to Build A Currency Converter App in HTML CSS & JavaScript. In the earlier blog, I have shared how to Build A Weather App in JavaScript, and not it’s time to create a currency converter using pure JavaScript.
In this app (Currency Converter in JavaScript), you can enter your amount and convert your currency to a different country’s currency. You can’t leave the amount field blank or enter 0 as an amount. If you do it, then “1” will be filled automatically in the amount field.
You can also easily exchange or reverse the two countries’ currency by clicking on the exchange icon. If you didn’t understand, then you can watch a demo or video tutorial of this project (JavaScript Currency Converter).
Video Tutorial of Currency Converter in JavaScript
In the video, you have seen the demo video of this currency converter and how I created it using HTML CSS & JavaScript. I tried to explain the main JavaScript line by written comments. I hope you liked this project and also understood the codes.
If you liked this JavaScript Currency Converter and want to get source codes or files, then you can get it from the bottom of this page. But before you go to copy-paste codes or download source files, let’s understand the main code and concepts behind creating this project.
Codes & Concepts Behind JavaScript Currency Converter App
In the JavaScript file (country-list.js), I stored all possible country code and their currency code as an object. Then in the script.js file, first, I created an options tag and added those currency codes inside each option tag using for-in loop and inserted these tags inside the select tag.
After this, I created a function and got the user-entered amount. Then I sent a get request to an exchange rate API by passing the user selected “from” currency code. API returned an object of the all-country currency conversion rate of the user-selected “from” currency.
First, I got the user selected “to” currency conversion rate, and then I calculate it with the user-entered amount and show it in the exchange rate text. Once it’s done, for swapping the currency codes, I just reversed the “from” currency to “to” currency and then call the function. For flags, I used countryflags.io API to show the user-selected country flag.
You might like this:
- Weather App in JavaScript
- Custom Captcha in JavaScript
- File Uploader with Progress Bar
- Draggable Div Element JavaScript
Currency Converter App in JavaScript [Source Codes]
To create this project (Currency Converter in JavaScript). First, you need to create four Files: HTML, CSS & JavaScript Files. After creating these files just paste the following codes into your file. You can also download the source code files of this Currency Converter from the given download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Currency Converter App in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Currency Converter</header>
<form action="#">
<div class="amount">
<p>Enter Amount</p>
<input type="text" value="1">
</div>
<div class="drop-list">
<div class="from">
<p>From</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/us.png" alt="flag">
<select> <!-- Options tag are inserted from JavaScript --> </select>
</div>
</div>
<div class="icon"><i class="fas fa-exchange-alt"></i></div>
<div class="to">
<p>To</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/np.png" alt="flag">
<select> <!-- Options tag are inserted from JavaScript --> </select>
</div>
</div>
</div>
<div class="exchange-rate">Getting exchange rate...</div>
<button>Get Exchange Rate</button>
</form>
</div>
<script src="js/country-list.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
background: #675AFE;
}
::selection{
color: #fff;
background: #675AFE;
}
.wrapper{
width: 370px;
padding: 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form{
margin: 40px 0 20px 0;
}
form :where(input, select, button){
width: 100%;
outline: none;
border-radius: 5px;
border: none;
}
form p{
font-size: 18px;
margin-bottom: 5px;
}
form input{
height: 50px;
font-size: 17px;
padding: 0 15px;
border: 1px solid #999;
}
form input:focus{
padding: 0 14px;
border: 2px solid #675AFE;
}
form .drop-list{
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.drop-list .select-box{
display: flex;
width: 115px;
height: 45px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
.select-box img{
max-width: 21px;
}
.select-box select{
width: auto;
font-size: 16px;
background: none;
margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
width: 8px;
}
.select-box select::-webkit-scrollbar-track{
background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.drop-list .icon{
cursor: pointer;
margin-top: 30px;
font-size: 22px;
}
form .exchange-rate{
font-size: 17px;
margin: 20px 0 30px;
}
form button{
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
background: #675AFE;
transition: 0.3s ease;
}
form button:hover{
background: #4534fe;
}
Third, create a JavaScript file with the name of country-list.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension. In this file, we’ll store all country code and their currency code.
let country_list = {
"AED" : "AE",
"AFN" : "AF",
"XCD" : "AG",
"ALL" : "AL",
"AMD" : "AM",
"ANG" : "AN",
"AOA" : "AO",
"AQD" : "AQ",
"ARS" : "AR",
"AUD" : "AU",
"AZN" : "AZ",
"BAM" : "BA",
"BBD" : "BB",
"BDT" : "BD",
"XOF" : "BE",
"BGN" : "BG",
"BHD" : "BH",
"BIF" : "BI",
"BMD" : "BM",
"BND" : "BN",
"BOB" : "BO",
"BRL" : "BR",
"BSD" : "BS",
"NOK" : "BV",
"BWP" : "BW",
"BYR" : "BY",
"BZD" : "BZ",
"CAD" : "CA",
"CDF" : "CD",
"XAF" : "CF",
"CHF" : "CH",
"CLP" : "CL",
"CNY" : "CN",
"COP" : "CO",
"CRC" : "CR",
"CUP" : "CU",
"CVE" : "CV",
"CYP" : "CY",
"CZK" : "CZ",
"DJF" : "DJ",
"DKK" : "DK",
"DOP" : "DO",
"DZD" : "DZ",
"ECS" : "EC",
"EEK" : "EE",
"EGP" : "EG",
"ETB" : "ET",
"EUR" : "FR",
"FJD" : "FJ",
"FKP" : "FK",
"GBP" : "GB",
"GEL" : "GE",
"GGP" : "GG",
"GHS" : "GH",
"GIP" : "GI",
"GMD" : "GM",
"GNF" : "GN",
"GTQ" : "GT",
"GYD" : "GY",
"HKD" : "HK",
"HNL" : "HN",
"HRK" : "HR",
"HTG" : "HT",
"HUF" : "HU",
"IDR" : "ID",
"ILS" : "IL",
"INR" : "IN",
"IQD" : "IQ",
"IRR" : "IR",
"ISK" : "IS",
"JMD" : "JM",
"JOD" : "JO",
"JPY" : "JP",
"KES" : "KE",
"KGS" : "KG",
"KHR" : "KH",
"KMF" : "KM",
"KPW" : "KP",
"KRW" : "KR",
"KWD" : "KW",
"KYD" : "KY",
"KZT" : "KZ",
"LAK" : "LA",
"LBP" : "LB",
"LKR" : "LK",
"LRD" : "LR",
"LSL" : "LS",
"LTL" : "LT",
"LVL" : "LV",
"LYD" : "LY",
"MAD" : "MA",
"MDL" : "MD",
"MGA" : "MG",
"MKD" : "MK",
"MMK" : "MM",
"MNT" : "MN",
"MOP" : "MO",
"MRO" : "MR",
"MTL" : "MT",
"MUR" : "MU",
"MVR" : "MV",
"MWK" : "MW",
"MXN" : "MX",
"MYR" : "MY",
"MZN" : "MZ",
"NAD" : "NA",
"XPF" : "NC",
"NGN" : "NG",
"NIO" : "NI",
"NPR" : "NP",
"NZD" : "NZ",
"OMR" : "OM",
"PAB" : "PA",
"PEN" : "PE",
"PGK" : "PG",
"PHP" : "PH",
"PKR" : "PK",
"PLN" : "PL",
"PYG" : "PY",
"QAR" : "QA",
"RON" : "RO",
"RSD" : "RS",
"RUB" : "RU",
"RWF" : "RW",
"SAR" : "SA",
"SBD" : "SB",
"SCR" : "SC",
"SDG" : "SD",
"SEK" : "SE",
"SGD" : "SG",
"SKK" : "SK",
"SLL" : "SL",
"SOS" : "SO",
"SRD" : "SR",
"STD" : "ST",
"SVC" : "SV",
"SYP" : "SY",
"SZL" : "SZ",
"THB" : "TH",
"TJS" : "TJ",
"TMT" : "TM",
"TND" : "TN",
"TOP" : "TO",
"TRY" : "TR",
"TTD" : "TT",
"TWD" : "TW",
"TZS" : "TZ",
"UAH" : "UA",
"UGX" : "UG",
"USD" : "US",
"UYU" : "UY",
"UZS" : "UZ",
"VEF" : "VE",
"VND" : "VN",
"VUV" : "VU",
"YER" : "YE",
"ZAR" : "ZA",
"ZMK" : "ZM",
"ZWD" : "ZW"
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. You’ve to create a file with .js extension and remember you have to pass your API key in the API URL otherwise this currency converter won’t work and it returns “something went wrong” error. You can get this key from the official ExchageRateAPI site for free.
const dropList = document.querySelectorAll("form select"),
fromCurrency = document.querySelector(".from select"),
toCurrency = document.querySelector(".to select"),
getButton = document.querySelector("form button");
for (let i = 0; i < dropList.length; i++) {
for(let currency_code in country_list){
let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
dropList[i].insertAdjacentHTML("beforeend", optionTag);
}
dropList[i].addEventListener("change", e =>{
loadFlag(e.target);
});
}
function loadFlag(element){
for(let code in country_list){
if(code == element.value){
let imgTag = element.parentElement.querySelector("img");
imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
}
}
}
window.addEventListener("load", ()=>{
getExchangeRate();
});
getButton.addEventListener("click", e =>{
e.preventDefault();
getExchangeRate();
});
const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", ()=>{
let tempCode = fromCurrency.value;
fromCurrency.value = toCurrency.value;
toCurrency.value = tempCode;
loadFlag(fromCurrency);
loadFlag(toCurrency);
getExchangeRate();
})
function getExchangeRate(){
const amount = document.querySelector("form input");
const exchangeRateTxt = document.querySelector("form .exchange-rate");
let amountVal = amount.value;
if(amountVal == "" || amountVal == "0"){
amount.value = "1";
amountVal = 1;
}
exchangeRateTxt.innerText = "Getting exchange rate...";
let url = `https://v6.exchangerate-api.com/v6/YOUR-API-KEY/latest/${fromCurrency.value}`;
fetch(url).then(response => response.json()).then(result =>{
let exchangeRate = result.conversion_rates[toCurrency.value];
let totalExRate = (amountVal * exchangeRate).toFixed(2);
exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
}).catch(() =>{
exchangeRateTxt.innerText = "Something went wrong";
});
}
That’s all, now you’ve successfully built a Currency Converter App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
After extracting the file, open the JavaScript file and pass your API key in the API URL. You can get this key from the official ExchageRateAPI site for free. You can also use any other site API for this project. If you do so then you have to modify the JavaScript codes accordingly.
I need some help! Do I need my own API key?
Yes, you need your own API key and paste it in the mentioned place in the code.
I’m new to this and I don’t know where to paste the api key help please
Wow Working I change My Api
droplist for countries is not working for me
You may do some mistakes with the codes. Try downloading the files by clicking on the given download button.
I am getting TypeError: Cannot read properties of undefined (reading ‘then’). Any ideas why?
Hi CodingNepal, random question, whats your favorite programming language
Hi CodingNepal, Great work. Thanks, Is there a way to set a currency and the all the prices on the website is converted to the visitor’s preferred currency?
With the method you did, this isn’t dne autmaically, instead the guests have to enter each pric manually
Is it possible to explain the architecture of this program?
Dear CodingNepal, I failed to convert currency because there was an error in your `script.js` file. It says the Cross-Origin Resource Sharing (CORS) is missing a header.
No, you shouldn’t get a cors error because that API allows you to access currency info. Maybe, you have an issue with the API key. Make sure you’ve passed a valid API key and it’s not expired.
Coding Nepal how can I learn JavaScript from you
And I am from Nigeria
You can view my JavaScript playlist for it: https://www.youtube.com/watch?v=gXuzkwRivfg&list=PLpwngcHZlPadhRwryAXw3mJWX5KH3T5L3
Hi Coding Nepal,
Can you make a custom currency converter where i can add the value I want and the the custom currency I want without out getting anything anything from any API. A simple customer currency converter where one can have control over
With this method, you can’t show real-time currency exchange rates.
Everthing is clear , but there is something that i could not understand!
dropList.length (line6) in javascript file is equal = 2 , cz we have 2 element
So how the for loop continue looping if the i < 2 ? 🙁
how the condition is true here ?
Sir! Can we build a Game by using html, css and js?
Yes, you can. And, I have already built some games in JavaScript. Please, visit my JavaScript YouTube Playlist
Hey? This project code and location tracker project is giving the error of something went wrong . Kindly check it.
I’m using the free plan of the API that I used to get currency details. On this free plan, I have limited requests for this API in a month. Now, I reached it so it’s showing “something went wrong”. Once 30 days are completed then the limit requests will be updated and this app starts working as before. Hope you understand!
Bro it says something went wrong
In my demo application..?
Its because u did not enters ur api key
Just YOUR-API-KEY with your apip key and try
You are Amazing. Please make a tutorial on How to downlaod Youtube Video downloader | Instagram Video Downloader | Instagaram picture downloader.
Okay, I’ll try to do it.
Very cool
Please can I have some project’s name for BSC in computer engineering??
let selected=i==0?currency_code==”USD”?”selected”:””:currency_code==”NPR”?”selected”:””;
could you plz explain this line for me ?
It’s ternary operator as a shorthand way or writing an if-else statement. Here is the if else codes of this.
let selected;
if(i == 0){
if(currency_code == “USD”){
selected = “selected”;
}else{
selected = “”;
}
}else{
if(currency_code == “NPR”){
selected = “selected”;
}else{
selected = “”;
}
}
In ternary, ? refers to if the codition is true and : refers to the else. Hope you understand.
Very nice
Amazing
bro its op (love from india)
Keep loving
yeah
very nice sir
How do you build a comment in website?
if i write any string in currency convertor it gives result like this ‘Hello USD = NaN NPR’. Hope you will fix it
I didn’t validate inputs. You can replace the text value of the type attribute with number in the input field for it.
Nice and cool, thanks for I wanted to learn how you made the progress before loading the fetched data.
It’s easy. Just show the progress before fetching data and once data is fetched then remove the progress.
Dope
Very good. This is a very clever idea.
Please could you make a text processor next.
nice