| const amountInput = document.getElementById('amount'); |
| const fromCurrency = document.getElementById('fromCurrency'); |
| const toCurrency = document.getElementById('toCurrency'); |
| const swapButton = document.getElementById('swapButton'); |
| const convertButton = document.getElementById('convertButton'); |
| const resultDiv = document.getElementById('result'); |
|
|
| |
| let autoConvert = false; |
|
|
| |
| convertButton.addEventListener('click', async () => { |
| autoConvert = true; |
| await convertCurrency(); |
| convertButton.style.display = 'none'; |
| }); |
|
|
| |
| swapButton.addEventListener('click', async () => { |
| const temp = fromCurrency.value; |
| fromCurrency.value = toCurrency.value; |
| toCurrency.value = temp; |
|
|
| |
| await convertCurrency(); |
| }); |
|
|
| |
| amountInput.addEventListener('input', async () => { |
| if (autoConvert) { |
| await convertCurrency(); |
| } |
| }); |
|
|
| |
| [fromCurrency, toCurrency].forEach(element => { |
| element.addEventListener('change', () => { |
| |
| autoConvert = false; |
| convertButton.style.display = 'block'; |
| resultDiv.innerHTML = ''; |
| }); |
| }); |
|
|
| |
| async function convertCurrency() { |
| const amount = amountInput.value; |
| const from = fromCurrency.value; |
| const to = toCurrency.value; |
|
|
| if (!amount || amount <= 0) { |
| resultDiv.innerHTML = 'Please enter a valid amount.'; |
| return; |
| } |
|
|
| try { |
| const apiKey = '3ebe2ccf9eeea2aaef280201'; |
| const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${from}`; |
| const response = await fetch(url); |
| const data = await response.json(); |
|
|
| if (data.result === 'success') { |
| const rate = data.conversion_rates[to]; |
| const convertedAmount = (amount * rate).toFixed(2); |
| resultDiv.innerHTML = `${amount} ${from} = ${convertedAmount} ${to}`; |
| } else { |
| resultDiv.innerHTML = `Error: ${data['error-type']}`; |
| } |
| } catch (error) { |
| resultDiv.innerHTML = 'Error fetching conversion rate.'; |
| console.error(error); |
| } |
| } |
|
|