How to Create a Currency Converter in JavaScript?

Front End Technology Javascript Web Development

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.