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.

Table of Contents
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.