How to create simple currency converter using JavaScript

by

In this step-by-step tutorial, we’ll guide you through the process of creating a basic “Currency Converter” application using JavaScript. We’ll provide detailed explanations for each JavaScript function and line of code, ensuring a clear understanding of how the application works.

HTML

First, let’s set up the HTML structure for our Currency Converter. We’ll create input fields for the amount and dropdown menus for selecting currencies.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Currency Converter</title>
</head>
<body>
    <h1>Currency Converter</h1>
    <label for="amount">Amount:</label>
    <input type="number" id="amountInput">
    <label for="fromCurrency">From:</label>
    <select id="fromCurrency">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
    </select>
    <label for="toCurrency">To:</label>
    <select id="toCurrency">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
    </select>
    <button onclick="convertCurrency()">Convert</button>
    <p id="result"></p>

    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

Explanation

  • We’ve created a simple HTML page with the necessary elements for our Currency Converter application.
  • Users can input the amount they want to convert, select the currency they’re converting from (From), and the currency they’re converting to (To).
  • A button labeled “Convert” triggers the conversion process, and the converted amount is displayed below.

JavaScript Functionality

Next, let’s implement the JavaScript code to perform the currency conversion. We’ll define a function convertCurrency() to retrieve user input, calculate the converted amount, and display the result.

<script>
    // Object containing exchange rates (1 unit of base currency to target currency)
    const exchangeRates = {
        USD: 1,    // US Dollar
        EUR: 0.83, // Euro
        GBP: 0.72, // British Pound
        JPY: 109.58 // Japanese Yen
    };

    // Function to convert amount from one currency to another
    function convertCurrency() {
        // Retrieve user input
        const amount = parseFloat(document.getElementById('amountInput').value);
        const fromCurrency = document.getElementById('fromCurrency').value;
        const toCurrency = document.getElementById('toCurrency').value;

        // Calculate the converted amount
        const rate = exchangeRates[toCurrency] / exchangeRates[fromCurrency];
        const convertedAmount = amount * rate;

        // Display the result
        document.getElementById('result').textContent = amount + " " + fromCurrency + " equals " + convertedAmount.toFixed(2) + " " + toCurrency;
    }
</script>

Explanation

  • We’ve defined an object exchangeRates containing exchange rates for various currencies relative to the base currency (USD).
  • The convertCurrency() function is responsible for performing the currency conversion.
  • It retrieves the amount, base currency, and target currency selected by the user from the HTML elements.
  • Using the exchange rates, it calculates the converted amount.
  • Finally, it updates the paragraph element with the converted amount.

Congratulations! By following this guide, you’ve successfully created a simple Currency Converter application using JavaScript. Users can now input amounts and select currencies for conversion, with the application providing real-time conversion results. Feel free to customize and expand upon this application further to enhance its functionality and user experience.

Leave a Comment