Create Currency Converter Component In LWC
By Aman Garg · Published · Salesforce Projects
“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;
}
}