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
