currencyConverter.html
<template>
<lightning-card title="Currency Converter" icon-name="utility:money">
<div class="slds-p-around_medium">
<lightning-input label="Amount" type="number" step="0.01" value={amount} onchange={handleAmountChange}></lightning-input>
<lightning-combobox label="From Currency" value={fromCurrency} options={currencyOptions} onchange={handleFromCurrencyChange}></lightning-combobox>
<lightning-combobox label="To Currency" value={toCurrency} options={currencyOptions} onchange={handleToCurrencyChange}></lightning-combobox>
<div class="slds-m-top_medium">
<lightning-button label="Convert" variant="brand" onclick={handleConvert}></lightning-button>
</div>
<div class="slds-m-top_medium">
<p>Converted Amount: {convertedAmount}</p>
</div>
</div>
</lightning-card>
</template>
currencyConverter.js
import { LightningElement, track } from 'lwc';
export default class CurrencyConverter extends LightningElement {
@track amount = 0;
@track fromCurrency = 'USD';
@track toCurrency = 'EUR';
@track convertedAmount = 0;
currencyOptions = [
{ label: 'US Dollar (USD)', value: 'USD' },
{ label: 'Euro (EUR)', value: 'EUR' },
// Add more currency options as needed
];
handleAmountChange(event) {
this.amount = parseFloat(event.target.value);
}
handleFromCurrencyChange(event) {
this.fromCurrency = event.detail.value;
}
handleToCurrencyChange(event) {
this.toCurrency = event.detail.value;
}
handleConvert() {
// Perform currency conversion logic here
// For simplicity, let's assume a basic conversion rate
const conversionRate = 0.85; // 1 USD to EUR rate
this.convertedAmount = (this.amount * conversionRate).toFixed(2);
}
}
currencyConverter.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
