We use cookies to ensure that we give you the best experience on our website.

Make JavaScript Currency Converter

How to Make JavaScript Currency Converter?

A currency converter is a useful tool that allows users to convert between different currencies at current exchange rates.

In this step-by-step guide, we’ll walk you through the process of creating a simple JavaScript currency converter that fetches exchange rates from a free API and provides real-time currency conversion.

By the end of this tutorial, you’ll have a functional currency converter that you can use on your website or as a standalone application.

Creating a Simple JavaScript Currency Converter: A Step-by-Step Guide

Prerequisites

Before we start, ensure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • A code editor (e.g., Visual Studio Code, Sublime Text).
  • A stable internet connection (to fetch exchange rate data from an API).

1. Set Up Your HTML Structure

First, create the HTML structure for your currency converter. You’ll need two <select> elements to choose the source and target currencies, two input fields to enter the amount and display the result, and two buttons one for trigger the conversion and another for swapping the currencies.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Currency Converter</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1>Currency Converter</h1>
        <div class="converter">
            <div class="input-group">
                <input type="number" id="amount" placeholder="Enter amount" />
                <select id="fromCurrency">
                    <option value="">Select From Currency</option>
                </select>
            </div>
            <div><strong>To</strong></div>
            <div class="input-group">
                <input type="text" id="result" placeholder="Result" disabled />
                <select id="toCurrency">
                    <option value="">Select Currency To</option>
                </select>
            </div>
            <button id="convert">Convert</button>
            <button id="swap">Swap</button>
        </div>
        <script src="script.js"></script>
    </body>
</html>

2. Create the CSS Styles

Style your currency converter by adding CSS. You can create a styles.css file and include it in your HTML’s <head> section.

*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;
}

h1 {
    color: #222;
}

.converter {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.input-group {
    margin: 10px 0;
}

input[type='number'],
input[type='text'],
select,
button {
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    outline: none;
}
button {
    cursor: pointer;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    border-color: #adb1b8 #a2a6ac #8d9096;
}

#swap {
    margin-top: 10px;
}
UI of JavaScript currency converter

3. Fetch Currency Exchange Rates

To fetch exchange rates, you’ll need an API that provides currency conversion data.

In this example, we’ll use the Free Currency Rates API (by Fawaz Ahmed) to get exchange rate data. It is Free and you don’t need to Sign up or an API key.

Features of this Free Currency Rates API:

  • Free & Blazing Fast response
  • No Rate limits
  • 150+ Currencies, Including Common Cryptocurrencies
  • Daily Updated
# Lists all the available currencies in prettified json format:
https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json

# Get a minified version of it:
https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.min.json
/currencies/{currencyCode}/{currencyCode}

# Example: Get the currency value for USD to INR:
https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/usd/inr.json

Now, create a script.js file and add the following JavaScript code to fetch exchange rates and populate the currency dropdowns. Read the code comments to understand the code.

// From Currency Select Element
const fromCurrency = document.getElementById('fromCurrency');
// To Currency Select Element
const toCurrency = document.getElementById('toCurrency');
// From Currency Input Element
const amount = document.getElementById('amount');
// To Currency Input Element
const result = document.getElementById('result');
// Convert Button
const convert = document.getElementById('convert');
// Swap Button
const swap = document.getElementById('swap');

let fromCurrencyValue;
let toCurrencyValue;
const fromCurrencyRate = 1;
// This Rate will Get From API
let toCurrencyRate = null;

/**
 *
 * @convertCurrency() This function contains the logic to convert currency
 * Before calling this function we need to set appropriate data in the uninitialized variables.
 */
function convertCurrency() {
    if (toCurrencyRate === null || isNaN(parseFloat(amount.value))) return;
    const convertedAmount = parseFloat(amount.value) * toCurrencyRate;
    result.value = convertedAmount.toFixed(2);
}

const currencyListAPI_URL =
    'https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.min.json';

// Fetching the Currency List- ["usd","inr","eur",...]
fetch(currencyListAPI_URL)
    .then((response) => response.json())
    .then((data) => {
        // Inserting Currency List into the select elements
        for (i in data) {
            const option1 = new Option(data[i], i);
            const option2 = new Option(data[i], i);
            fromCurrency.add(option1);
            toCurrency.add(option2);
        }
    });

// Fetching Currencies Information
async function fetchCurrenciesInfo() {
    // If fromCurrencyValue or toCurrencyValue undefined then return;
    if (!fromCurrencyValue || !toCurrencyValue) return;

    // Disabling the Convert and Swap Button
    convert.disabled = true;
    swap.disabled = true;
    // Changing the Inner Text of the convert button to fetching
    convert.innerText = 'Fetching...';

    const apiUrl = `https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${fromCurrencyValue}/${toCurrencyValue}.json`;
    try {
        // Read the following comment to know what will get in the "data" variable
        const data = await (await fetch(apiUrl)).json();
        /**
         * if (fromCurrencyValue = usd), and (toCurrencyValue = inr) then -
         *
         * fromCurrencyValue (usd) = 1
         *
         * data = {
         *    "date": "YYY-MM-DD",
         *    toCurrencyValue("inr"): 82.83037298
         * }
         *
         */
        if (
            data[toCurrencyValue] &&
            !isNaN(parseFloat(data[toCurrencyValue]))
        ) {
            toCurrencyRate = parseFloat(data[toCurrencyValue]);
        } else {
            toCurrencyRate = null;
            alert('Currency Rate not found in the Response JSON.');
        }
    } catch (err) {
        toCurrencyRate = null;
        console.log(err.message);
    } finally {
        convert.innerText = 'Convert';
        convert.disabled = false;
        swap.disabled = false;
    }
}

// This function will Invoke
const onSelectChange = (e, fromCurrency = true) => {
    // it will prevent the selection through up and down arrow key
    e.target.disabled = true;
    e.target.disabled = false;

    const value = e.target.value;
    // fromCurrency true means changing the from currency select element, else it is To currency select element
    if (fromCurrency) {
        fromCurrencyValue = value;
    } else {
        toCurrencyValue = value;
    }
    // After putting the value into the variable fetch the currencies info
    fetchCurrenciesInfo();
};

// On select Change
fromCurrency.addEventListener('change', (e) => onSelectChange(e));
toCurrency.addEventListener('change', (e) => onSelectChange(e, false));

// Perform currency conversion on button click
convert.addEventListener('click', convertCurrency);

// Swap the currencies on button click
swap.addEventListener('click', () => {
    if (!toCurrencyValue || !fromCurrencyValue) return;
    // swapping the variables
    [toCurrencyValue, fromCurrencyValue] = [fromCurrencyValue, toCurrencyValue];

    // Swapping the value of the Select elements
    fromCurrency.value = fromCurrencyValue;
    toCurrency.value = toCurrencyValue;

    // From currency amount = To currency amount
    // amount.value = result.value;
    [amount.value, result.value] = [result.value, amount.value];

    // Swapping the Currency Rate
    toCurrencyRate = fromCurrencyRate / toCurrencyRate;
    convertCurrency();
});

4. Test Your Currency Converter

  • Now, open the HTML file in your web browser, and you should see your currency converter interface.
  • Select source and target currencies, enter an amount, and click the “Convert” button.
  • The converted amount will be displayed in the result field.

Congratulations! You’ve created a simple JavaScript currency converter that fetches real-time exchange rates from an API. You can further enhance this project by adding more features like currency symbols, currency flags, and error handling for invalid inputs.

Related Posts