Currency Converter in JavaScript - GeeksforGeeks

21 May, 2021
In this article, we will implement a currency converter that simply converts the currency into any other country’s currency.
Pre-requisites:
Basic HTML, CSS, JavaScript.
Approach:
HTML code is implemented for GUI for user entries of the amount and two currencies.
Select the currency, Convert button display the converted amount.
The Reset button resets the data.
JavaScript functions and custom methods are used for implementing currency conversion like addEventListener().
Currency exchange API is used in the script file.
HTML code: The following HTML code implements the GUI for user entries like amount and both the currencies for which the conversion needs to take place.
index.html
<!DOCTYPE html><html lang="en">  <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</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</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: The following is the content for the file “style.css” used in the above HTML file.
style.css
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: The following is the content for the file “script.js” used in the above HTML code.
Javascript
// include api for currency changeconst api = "https://api.exchangerate-api.com/v4/latest/USD";  // for selecting different controlsvar 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 changedfromCurrecy.addEventListener('change', (event) => {    resultFrom = `${event.target.value}`;});  // Event when currency is changedtoCurrecy.addEventListener('change', (event) => {    resultTo = `${event.target.value}`;});  search.addEventListener('input', updateValue);  // function for updating valuefunction updateValue(e) {    searchValue = e.target.value;}  // when user clicks, it calls function getresults convert.addEventListener("click", getResults);  // function getresultsfunction getResults() {    fetch(`${api}`)        .then(currency => {            return currency.json();        }).then(displayResults);}  // display results after convertionfunction 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 buttonfunction clearVal() {    window.location.reload();    document.getElementsByClassName("finalValue").innerHTML = "";};
Output:
Before click:
After click:
After conversion
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML5
javascript-math
JavaScript-Questions
Project-Ideas
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?