Friday, October 24, 2025
HomeLanguagesJavascriptCurrency Converter in JavaScript
LanguagesJavascript

Currency Converter in JavaScript

Shaida Kate Naidoo
By Shaida Kate Naidoo
0
0

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


















 






 




 



























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


const api = "https://api.exchangerate-api.com/v4/latest/USD";


 


// 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



















Previous article
Saurik issues rare update for Cydia Substrate w/ iOS 13 support & critical bug fix
Next article
Magma Evo lets you personalize the Control Center interface



Shaida Kate Naidoo
Shaida Kate Naidoo


RELATED ARTICLES











Most Popular
Load more


Algomaster
Algomaster
202 POSTS0 COMMENTS
https://blog.algomaster.io
Calisto Chipfumbu
Calisto Chipfumbu
6745 POSTS0 COMMENTS
http://cchipfumbu@gmail.com
Dominic
Dominic
32361 POSTS0 COMMENTS
http://wardslaus.com
Milvus
Milvus
88 POSTS0 COMMENTS
https://milvus.io/
Nango Kala
Nango Kala
6728 POSTS0 COMMENTS
neverop
neverop
0 POSTS0 COMMENTS
https://geeksforgeeks.org
Nicole Veronica
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Safety Detectives
Safety Detectives
2684 POSTS0 COMMENTS
https://www.safetydetectives.com/
Shaida Kate Naidoo
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
Umr Jansen
6801 POSTS0 COMMENTS
                                    

            

        

        
    
 


    

                

            














EDITOR PICKS





POPULAR POSTS





POPULAR CATEGORY










 







ABOUT US



 We provide you with the latest breaking news and videos straight from the technology  industry.



Contact us: hello@geeksforgeeks.org






FOLLOW US











© NeverOpen  2022