Open In App

Currency Converter in JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

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 displays 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.

Add code in index.html. 

CSS code: The following is the content for the file “style.css”.

JavaScript code: The following is the content for the file “script.js” used in the above HTML code.

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
 
    <link rel="preconnect"
          href=
    <link href=
        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




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




// Include api for currency change
 
// For selecting different controls
let search = document.querySelector(".searchBox");
let convert = document.querySelector(".convert");
let fromCurrecy = document.querySelector(".from");
let toCurrecy = document.querySelector(".to");
let finalValue = document.querySelector(".finalValue");
let finalAmount = document.getElementById("finalAmount");
let resultFrom;
let resultTo;
let 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:

Currency Converter in JavaScript

Currency Converter in JavaScript



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads