Currency converter

[Sorbon]

I need a currency converter. Ready-made plugins exist, but I didn't like their design. I want to create a converter in Elementor. The question is how and where to start?

for example, something like this:

 

[Community]

It would require custom functions, here is a basic one to get you started but obviously would need alot more refining and styling. As well as a way of updating the currency conversion rates for each set. There are free API's available to do this but with limitations, for example :

Sign Up | Exchangerate API

Sign up for your personal access key and start using the currencylayer API - free, accurate and powerful currency exchange rates and currency conversion.

exchangerate.host

[currency_converter]

function basic_currency_converter_shortcode() {
    ob_start();
    ?>
    <div id="currency-converter" style="max-width: 300px; padding: 1em; border: 1px solid #ccc; border-radius: 8px;">
        <h3>Currency Converter</h3>
        <form onsubmit="return false;">
            <label for="amount">Amount:</label><br>
            <input type="number" id="amount" placeholder="Enter amount" /><br><br>

            <label for="from">From:</label><br>
            <select id="from">
                <option value="USD">USD</option>
            </select><br><br>

            <label for="to">To:</label><br>
            <select id="to">
                <option value="EUR">EUR</option>
            </select><br><br>

            <button onclick="convertCurrency()">Convert</button><br><br>

            <div id="result"></div>
        </form>
    </div>

    <script>
    function convertCurrency() {
        const amount = parseFloat(document.getElementById("amount").value);
        const from = document.getElementById("from").value;
        const to = document.getElementById("to").value;
        const rate = 0.91; // Static USD to EUR rate (update as needed)

        if (isNaN(amount)) {
            document.getElementById("result").innerHTML = "Please enter a valid amount.";
            return;
        }

        const converted = (amount * rate).toFixed(2);
        document.getElementById("result").innerHTML = `${amount} ${from} = ${converted} ${to}`;
    }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('currency_converter', 'basic_currency_converter_shortcode');

This would include the free API usage, obviously again this is totally untested and just an example to get you started

function live_currency_converter_shortcode() {
    ob_start();
    ?>
    <style>
        #currency-converter {
            max-width: 400px;
            padding: 1.5em;
            border: 1px solid #ddd;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            font-family: 'Segoe UI', sans-serif;
            background: #fff;
        }

        #currency-converter h3 {
            margin-bottom: 1em;
            font-size: 1.4em;
            color: #333;
        }

        #currency-converter label {
            display: block;
            margin-top: 1em;
            font-weight: 500;
        }

        #currency-converter input, #currency-converter select {
            width: 100%;
            padding: 0.6em;
            margin-top: 0.3em;
            border: 1px solid #ccc;
            border-radius: 6px;
        }

        #currency-converter button {
            margin-top: 1.2em;
            width: 100%;
            padding: 0.7em;
            background-color: #0073e6;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
        }

        #currency-converter button:hover {
            background-color: #005bb5;
        }

        #currency-result {
            margin-top: 1em;
            font-size: 1.1em;
            font-weight: 500;
            color: #2a2a2a;
        }
    </style>

    <div id="currency-converter">
        <h3>Live Currency Converter</h3>
        <form onsubmit="return false;">
            <label for="amount">Amount</label>
            <input type="number" id="amount" placeholder="e.g. 100" required />

            <label for="from">From Currency</label>
            <select id="from">
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="JPY">JPY</option>
                <option value="AUD">AUD</option>
                <option value="CAD">CAD</option>
                <option value="INR">INR</option>
                <option value="ZAR">ZAR</option>
                <!-- Add more if needed -->
            </select>

            <label for="to">To Currency</label>
            <select id="to">
                <option value="EUR">EUR</option>
                <option value="USD">USD</option>
                <option value="GBP">GBP</option>
                <option value="JPY">JPY</option>
                <option value="AUD">AUD</option>
                <option value="CAD">CAD</option>
                <option value="INR">INR</option>
                <option value="ZAR">ZAR</option>
            </select>

            <button onclick="convertLiveCurrency()">Convert</button>
        </form>
        <div id="currency-result"></div>
    </div>

    <script>
        async function convertLiveCurrency() {
            const amount = parseFloat(document.getElementById("amount").value);
            const from = document.getElementById("from").value;
            const to = document.getElementById("to").value;

            if (isNaN(amount)) {
                document.getElementById("currency-result").innerText = "Please enter a valid amount.";
                return;
            }

            const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`;

            try {
                const res = await fetch(url);
                const data = await res.json();

                if (data.result) {
                    document.getElementById("currency-result").innerText = `${amount} ${from} = ${data.result.toFixed(2)} ${to}`;
                } else {
                    document.getElementById("currency-result").innerText = "Conversion failed. Try again.";
                }
            } catch (error) {
                document.getElementById("currency-result").innerText = "Error fetching exchange rate.";
            }
        }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('currency_converter', 'live_currency_converter_shortcode');