Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Currency Converter in JavaScript?
In this tutorial, we will be discussing how to create a currency converter in JavaScript. We will be discussing the various steps involved in creating such a converter.
What is a currency converter?
A currency converter is a tool that helps you convert one currency to another. For example, if you are from the United States and you are traveling to Europe, you will need to use a currency converter to convert your US dollars into Euros.
Why use JavaScript to create a currency converter?
JavaScript is a versatile programming language that can be used to create a wide variety of applications, including web-based applications. When it comes to creating a currency converter, JavaScript provides a number of advantages, such as:
Ease of use JavaScript is relatively easy to learn and use, compared to other programming languages. This makes it an ideal choice for creating a currency converter application.
Cross-platform compatibility JavaScript code can be executed on different platforms, such as Windows, Mac, and Linux. This makes it possible to create a currency converter that can be used by people on different platforms.
Popularity JavaScript is one of the most popular programming languages in the world. This means that there is a large community of developers who can provide support and assistance if needed.
Example 1
Now that we have discussed some of the reasons for using JavaScript to create a currency converter, let's take a look at the code to create a currency converter.
Below is the full working code.
<!doctype html>
<HTML>
<head>
<title>How to Create a Currency Converter in JavaScript</title>
</head>
<body>
<h1>Currency Converter</h1>
<p> Select Currency and enter Amount to convert.</p>
<form>
<label>From:</label>
<select id="from">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<label>To:</label>
<select id="to">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<label>Amount:</label>
<input type="text" id="amount" />
<button type="button" id="convert">Convert</button>
<p id="result"></p>
</form>
<script>
const convert = document.getElementById("convert");
const result = document.getElementById("result");
const from = document.getElementById("from");
const to = document.getElementById("to");
const amount = document.getElementById("amount");
convert.addEventListener("click", function() {
let fromCurrency = from.value;
let toCurrency = to.value;
let amt = amount.value;
fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)
.then(response => {
return response.json();
})
.then(data => {
let rate = data.rates[toCurrency];
let total = rate * amt;
result.innerHTML = `${amt} ${fromCurrency} = ${total}
${toCurrency}`;
});
});
</script>
</body>
</html>
In the above code, we have created a currency converter that can convert USD to EUR, GBP, and INR.
Note You can easily modify the code to support other currencies as well.
Conclusion
Creating a currency converter in JavaScript is a relatively easy task. All you need to do is use the JavaScript programming language to create a web-based application. You can use the code provided in this tutorial to create a currency converter that can convert USD to EUR, GBP, and INR.
9K+ Views
