Post

Live Currency Converter

Live Currency Converter

In today’s globalized world, converting currencies quickly and accurately is essential. Whether you’re planning a trip abroad, managing international investments, or simply curious about how your money measures up in different currencies, having a reliable tool at your fingertips can save time and effort.

I created this currency converter to make the process simple and fast. With live exchange rate data pulled directly from an API, you can convert one currency to another in real-time. The tool allows you to input an amount, choose the currencies you want to convert from and to, and get an instant conversion based on the most current exchange rates.

Features:

  • Amount to Convert: Input the value you wish to convert.
  • From Currency: Select the currency you are converting from.
  • To Currency: Select the currency you want to convert to.
  • Real-Time Conversion: Get the latest exchange rate and convert instantly.

This tool uses reliable exchange rate APIs to ensure accuracy, so you can make informed decisions with ease.

Live Currency Converter

Currency Converter







Converted Amount:


Add This Currency Converter to Your Website

If you would like to add this currency converter to your website, you can use the following code. The tool uses live exchange rate data to convert one currency to another based on current rates.

How to Use:

  1. Copy the Code: Below is the HTML and JavaScript code for the currency converter.
  2. Get Your Free API Key: Sign up at ExchangeRate-API to get a free API key.
  3. Insert the API Key: Replace 'YOUR_API_KEY' in the script with your newly obtained API key.

Currency Converter Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Currency Converter</title>
</head>
<body>
    <h2>Currency Converter</h2>
    <form id="currency-form">
        <label for="amount">Amount to Convert:</label>
        <input type="number" id="amount" required><br><br>
        
        <label for="fromCurrency">From Currency:</label>
        <select id="fromCurrency" required>
            <!-- Add your currency options here -->
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="GBP">GBP</option>
            <!-- More currencies... -->
        </select><br><br>

        <label for="toCurrency">To Currency:</label>
        <select id="toCurrency" required>
            <!-- Add your currency options here -->
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="GBP">GBP</option>
            <!-- More currencies... -->
        </select><br><br>

        <button type="submit">Convert</button>
    </form>

    <h3>Converted Amount: <span id="convertedAmount"></span></h3>

    <script>
        document.getElementById('currency-form').addEventListener('submit', function (event) {
            event.preventDefault();

            const amount = document.getElementById('amount').value;
            const fromCurrency = document.getElementById('fromCurrency').value;
            const toCurrency = document.getElementById('toCurrency').value;

            const apiKey = 'YOUR_API_KEY';  // Replace with your API key from a currency service
            const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const rate = data.rates[toCurrency];
                    const convertedAmount = (amount * rate).toFixed(2);
                    document.getElementById('convertedAmount').textContent = `${convertedAmount} ${toCurrency}`;
                })
                .catch(error => console.error('Error fetching exchange rates:', error));
        });
    </script>
</body>
</html>
This post is licensed under CC BY 4.0 by the author.