Currency Converter in JavaScript

by

Currency Converter in JavaScript: Hey Folks! Today In this article we will learn to create a Currency Converter in JavaScript. You have to know bit about HTML, CSS and JavaScript to build currency converter.

Currency Converter in JavaScript

What is Currency Converter ?

A currency converter is a tool that allows users to convert the value of one currency to another. It takes a specified amount in one currency and calculates its equivalent value in another currency based on the current exchange rate between the two currencies.

Currency converters are commonly used for international transactions, travel planning, and financial analysis. They provide a quick and easy way to convert currencies and make informed decisions about foreign exchange rates.

Code for Currency Converter in JavaScript

Below is the code with preview created in codepen you can copy paste the code and make changes according to your need.

HTML Code

<!DOCTYPE html>
<html lang="en">
<!-- Created By GeekyBeginners.com-->
<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 By GeekyBeginners</title>
	<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
	</script>

	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href=
"https://fonts.googleapis.com/css2?family=Amiri&family=Lobster&family=Pacifico&display=swap"
		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 By GeekyBeginners</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 Code

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: 50vw;
	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 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;
	}
}


JavaScript Code

// 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 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 = "";
};

Conclusion

In conclusion, building a currency converter in JavaScript is a useful and practical project for developers who want to create a tool that can help users convert currencies quickly and accurately. By leveraging real-time exchange rate APIs and JavaScript’s flexibility and accessibility, developers can create a highly customizable and interactive user interface that meets their specific needs.

Additionally, building a currency converter in JavaScript is a cost-effective solution that provides developers with a valuable learning experience in working with APIs and creating dynamic web applications.

Hope this post will help you building Currency converter in JavaScript. Let us know if you have any question or suggestion by comments.

Write for us
GeekyBeginners articles are written by software geeks like you. If you also would like to contribute to GeekyBeginners by writing paid articles, you can check the write for us page.

Leave a Comment