SF Learners Hub

MASTER SALESFORCE, CONQUER YOUR GOALS

Create Currency Converter Component In LWC

Share This Post

“Excited to unveil our latest project! We’re introducing a user-friendly currency conversion application developed with Lightning Web Components. Say goodbye to manual calculations and hello to seamless currency conversions, whether you’re traveling, shopping online, or managing finances. Stay tuned for more updates!”

currencyConverter.html

<template>
    <lightning-card title="Currency Converter">
        <lightning-layout>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-input type="number" label="Amount in INR" value={inrAmount} onchange={handleAmountChange}></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-combobox label="Select Currency" value={selectedCurrency} options={currencyOptions} onchange={handleCurrencyChange}></lightning-combobox>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-button label="Convert" onclick={convertCurrency}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
        <div if:true={convertedAmount}>
            Converted Amount: {convertedAmount}
        </div>
    </lightning-card>
</template>

currencyConverter.js

import { LightningElement, track } from 'lwc';

export default class CurrencyConverter extends LightningElement {
    @track inrAmount = '0';
    @track selectedCurrency = '';
    @track convertedAmount = '';

    currencyOptions = [
        { label: 'USD', value: 'USD' },
        { label: 'EUR', value: 'EUR' },
        { label: 'KZT', value: 'KZT' },
        { label: 'AUD', value: 'AUD' },
        { label: 'BDT', value: 'BDT' },
        { label: 'GBP', value: 'GBP' },
        // Add more currency options as needed
    ];

    handleAmountChange(event) {
        this.inrAmount = event.target.value;
    }

    handleCurrencyChange(event) {
        this.selectedCurrency = event.target.value;
    }

    convertCurrency() {
        // Perform currency conversion based on selected currency
        // Implement your conversion logic here
        // You can use APIs or hardcoded rates
        // For simplicity, let's assume 1 INR = 0.014 USD, 1 INR = 0.012 EUR, etc.
        const rates = {
            'USD': 0.01206,
            'EUR': 0.01115,
            'KZT': 5.42223,
            'AUD': 0.01837,
            'BDT': 1.30964,
            'GBP': 0.00952, 
            // Add more rates as needed
        };
        const rate = rates[this.selectedCurrency];
        this.convertedAmount = this.inrAmount * rate;
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Extract Valuable Data with Salesforce OCR

Revolutionize the way you handle and utilize your documents with OCR in Salesforce. Optical Character Recognition will enhance your data management and streamline business processes.