Skip to content
Related Articles
Open in App
Not now

Related Articles

Currency Converter in JavaScript

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 26 Nov, 2022
Improve Article
Save Article

In this article, we will implement a currency converter that simply converts the currency into any other country’s currency.

Pre-requisites:

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 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 = "";
};

Output:
  • Before click:
  • After click:
After conversion

My Personal Notes
arrow_drop_up
Previous
How to add float numbers using JavaScript ?
Next

How to get median of an array of numbers in JavaScript ?
Related Articles
1.
How to create a Currency converter app in ReactJS ?
2.
Infix to Postfix Converter using JavaScript
3.
Temperature Converter using HTML CSS and JavaScript
4.
How to create a weight converter with HTML and JavaScript ?
5.
How to format numbers as currency string in JavaScript ?
6.
How to convert a currency string to a double value with jQuery or Javascript?
7.
How to format a number as currency using CSS ?
8.
Create a Crypto Currency Price Tracking Chrome Extension
9.
Semantic-UI Icon Set Currency
10.
JavaScript Course | Understanding Code Structure in JavaScript
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
shivammahajancse
@shivammahajancse
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!