How to Create Currency Converter using JavaScript
6 min readSep 20, 2023
Create a Currency Converter using JavaScript
In this Tutorial, we will create a currency converter using JavaScript that easily convert the currency into any other country’s currency. Before we staring, everyone should be know with what the APIs are and how to use them to get the most latest exchange rates because we will be using api.exchangerate-api.com to get the real-time currency conversion rates. What is the purpose of the current converter, and how can we make one?
See also
How to Convert Number to Words using PHP
What is a currency converter?
A currency converter is a tool that allows you to convert one currency into another. For example, if you are from the United States and traveling to Europe, you will need to use a currency converter to convert US dollars to euros.
Create HTML Design Exchange Currency
HTML stands for Hyper Text Markup Language. It’s a markup language. His main task is to structure our project. We will structure our project with this markup language. So let’s take a look at our HTML code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Create a Currency Converter using JavaScript</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- linking style.css file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Currency Converter -->
<h1 class="heading text-center">
Currency Converter
</h1>
<hr>
<div class="container">
<div class="main">
<div class="form-group">
<label for="amount">Amount to Convert :</label>
<input type="text" class="form-control searchBox" placeholder="0.00" id="amount" required>
</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>
<?php
include_once "countryList.php";
?>
<select class="form-control from" id="sel1">
<option value="">Select Country</option>
<?php foreach ($currency_list as $code => $countryName) { ?>
<option value="<?php echo $code ?>"><?php echo $countryName; ?> (<?php echo $code; ?>)</option>
<?php } ?>
</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 Country</option>
<?php foreach ($currency_list as $code => $countryName) { ?>
<option value="<?php echo $code ?>"><?php echo $countryName; ?> (<?php echo $code; ?>)</option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="text-center">
<!-- convert button -->
<button type="submit" class="btn btn-success convert m-2">
Convert
</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>PHP Array Of All Currency Names, Code And Symbols
In this file All currency names and code list in PHP array. PHP currency name, code and symbols. You can also go to the github page.
countryList.php
<?php
// count 168
$currency_list = array(
"AFA" => "Afghan Afghani",
"ALL" => "Albanian Lek",
"DZD" => "Algerian Dinar",
"AOA" => "Angolan Kwanza",
"ARS" => "Argentine Peso",
"AMD" => "Armenian Dram",
"AWG" => "Aruban Florin",
"AUD" => "Australian Dollar",
"AZN" => "Azerbaijani Manat",
"BSD" => "Bahamian Dollar",
"BHD" => "Bahraini Dinar",
"BDT" => "Bangladeshi Taka",
"BBD" => "Barbadian Dollar",
"BYR" => "Belarusian Ruble",
"BEF" => "Belgian Franc",
"BZD" => "Belize Dollar",
"BMD" => "Bermudan Dollar",
"BTN" => "Bhutanese Ngultrum",
"BTC" => "Bitcoin",
"BOB" => "Bolivian Boliviano",
"BAM" => "Bosnia-Herzegovina Convertible Mark",
"BWP" => "Botswanan Pula",
"BRL" => "Brazilian Real",
"GBP" => "British Pound Sterling",
"BND" => "Brunei Dollar",
"BGN" => "Bulgarian Lev",
"BIF" => "Burundian Franc",
"KHR" => "Cambodian Riel",
"CAD" => "Canadian Dollar",
"CVE" => "Cape Verdean Escudo",
"KYD" => "Cayman Islands Dollar",
"XOF" => "CFA Franc BCEAO",
"XAF" => "CFA Franc BEAC",
"XPF" => "CFP Franc",
"CLP" => "Chilean Peso",
"CLF" => "Chilean Unit of Account",
"CNY" => "Chinese Yuan",
"COP" => "Colombian Peso",
"KMF" => "Comorian Franc",
"CDF" => "Congolese Franc",
"CRC" => "Costa Rican Colón",
"HRK" => "Croatian Kuna",
"CUC" => "Cuban Convertible Peso",
"CZK" => "Czech Republic Koruna",
"DKK" => "Danish Krone",
"DJF" => "Djiboutian Franc",
"DOP" => "Dominican Peso",
"XCD" => "East Caribbean Dollar",
"EGP" => "Egyptian Pound",
"ERN" => "Eritrean Nakfa",
"EEK" => "Estonian Kroon",
"ETB" => "Ethiopian Birr",
"EUR" => "Euro",
"FKP" => "Falkland Islands Pound",
"FJD" => "Fijian Dollar",
"GMD" => "Gambian Dalasi",
"GEL" => "Georgian Lari",
"DEM" => "German Mark",
"GHS" => "Ghanaian Cedi",
"GIP" => "Gibraltar Pound",
"GRD" => "Greek Drachma",
"GTQ" => "Guatemalan Quetzal",
"GNF" => "Guinean Franc",
"GYD" => "Guyanaese Dollar",
"HTG" => "Haitian Gourde",
"HNL" => "Honduran Lempira",
"HKD" => "Hong Kong Dollar",
"HUF" => "Hungarian Forint",
"ISK" => "Icelandic Króna",
"INR" => "Indian Rupee",
"IDR" => "Indonesian Rupiah",
"IRR" => "Iranian Rial",
"IQD" => "Iraqi Dinar",
"ILS" => "Israeli New Sheqel",
"ITL" => "Italian Lira",
"JMD" => "Jamaican Dollar",
"JPY" => "Japanese Yen",
"JOD" => "Jordanian Dinar",
"KZT" => "Kazakhstani Tenge",
"KES" => "Kenyan Shilling",
"KWD" => "Kuwaiti Dinar",
"KGS" => "Kyrgystani Som",
"LAK" => "Laotian Kip",
"LVL" => "Latvian Lats",
"LBP" => "Lebanese Pound",
"LSL" => "Lesotho Loti",
"LRD" => "Liberian Dollar",
"LYD" => "Libyan Dinar",
"LTC" => "Litecoin",
"LTL" => "Lithuanian Litas",
"MOP" => "Macanese Pataca",
"MKD" => "Macedonian Denar",
"MGA" => "Malagasy Ariary",
"MWK" => "Malawian Kwacha",
"MYR" => "Malaysian Ringgit",
"MVR" => "Maldivian Rufiyaa",
"MRO" => "Mauritanian Ouguiya",
"MUR" => "Mauritian Rupee",
"MXN" => "Mexican Peso",
"MDL" => "Moldovan Leu",
"MNT" => "Mongolian Tugrik",
"MAD" => "Moroccan Dirham",
"MZM" => "Mozambican Metical",
"MMK" => "Myanmar Kyat",
"NAD" => "Namibian Dollar",
"NPR" => "Nepalese Rupee",
"ANG" => "Netherlands Antillean Guilder",
"TWD" => "New Taiwan Dollar",
"NZD" => "New Zealand Dollar",
"NIO" => "Nicaraguan Córdoba",
"NGN" => "Nigerian Naira",
"KPW" => "North Korean Won",
"NOK" => "Norwegian Krone",
"OMR" => "Omani Rial",
"PKR" => "Pakistani Rupee",
"PAB" => "Panamanian Balboa",
"PGK" => "Papua New Guinean Kina",
"PYG" => "Paraguayan Guarani",
"PEN" => "Peruvian Nuevo Sol",
"PHP" => "Philippine Peso",
"PLN" => "Polish Zloty",
"QAR" => "Qatari Rial",
"RON" => "Romanian Leu",
"RUB" => "Russian Ruble",
"RWF" => "Rwandan Franc",
"SVC" => "Salvadoran Colón",
"WST" => "Samoan Tala",
"STD" => "São Tomé and Príncipe Dobra",
"SAR" => "Saudi Riyal",
"RSD" => "Serbian Dinar",
"SCR" => "Seychellois Rupee",
"SLL" => "Sierra Leonean Leone",
"SGD" => "Singapore Dollar",
"SKK" => "Slovak Koruna",
"SBD" => "Solomon Islands Dollar",
"SOS" => "Somali Shilling",
"ZAR" => "South African Rand",
"KRW" => "South Korean Won",
"SSP" => "South Sudanese Pound",
"XDR" => "Special Drawing Rights",
"LKR" => "Sri Lankan Rupee",
"SHP" => "St. Helena Pound",
"SDG" => "Sudanese Pound",
"SRD" => "Surinamese Dollar",
"SZL" => "Swazi Lilangeni",
"SEK" => "Swedish Krona",
"CHF" => "Swiss Franc",
"SYP" => "Syrian Pound",
"TJS" => "Tajikistani Somoni",
"TZS" => "Tanzanian Shilling",
"THB" => "Thai Baht",
"TOP" => "Tongan Pa'anga",
"TTD" => "Trinidad & Tobago Dollar",
"TND" => "Tunisian Dinar",
"TRY" => "Turkish Lira",
"TMT" => "Turkmenistani Manat",
"UGX" => "Ugandan Shilling",
"UAH" => "Ukrainian Hryvnia",
"AED" => "United Arab Emirates Dirham",
"UYU" => "Uruguayan Peso",
"USD" => "US Dollar",
"UZS" => "Uzbekistan Som",
"VUV" => "Vanuatu Vatu",
"VEF" => "Venezuelan BolÃvar",
"VND" => "Vietnamese Dong",
"YER" => "Yemeni Rial",
"ZMK" => "Zambian Kwacha",
"ZWL" => "Zimbabwean dollar"
);
?>Create CSS Page for Style
CSS page for style the HTML page to design the converting currency page.
style.css
.heading {
font-family: 'Roboto slab' sans-serif;
margin: 35px auto 20px;
font-weight: 600;
font-size: 60px;
}
hr {
border-top: 2px solid black;
width: 50%;
margin-bottom: 55px;
}
.main {
width: 50vw;
margin: auto;
padding: 30px;
border-radius: 5px;
background: rgb(87,87,192);
background: linear-gradient(45deg, rgba(87,87,192,1) 21%, rgba(136,132,202,1) 100%, rgba(0,212,255,1) 100%);
color: white;
}
label {
font-size: 20px;
}
.btn {
width: 200px;
}
#finalAmount {
font-family: 'Roboto slab' sans-serif;
display: none;
margin: 50px auto;
}
#finalAmount h2 {
font-size: 50px;
}
.finalValue {
font-family: 'Roboto slab' sans-serif;
}Create JavaScript Page
In this page we will create the JavaScript exchangerate-api.com api to convert current currency to any country using javaScript API.
script.js
// Include api for currency change
const api = "https://api.exchangerate-api.com/v4/latest/USD";
// 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";
}Please click on the blow link for more blog post
https://webscodex.com/how-to-create-currency-converter-javascript/