|
|
|
const amountInput = document.getElementById('amount'); |
|
const fromCurrency = document.getElementById('fromCurrency'); |
|
const toCurrency = document.getElementById('toCurrency'); |
|
const resultDiv = document.getElementById('result'); |
|
const convertButton = document.createElement('button'); |
|
convertButton.textContent = 'Convert'; |
|
convertButton.type = 'button'; |
|
convertButton.id = 'convertButton'; |
|
document.getElementById('currencyForm').appendChild(convertButton); |
|
|
|
|
|
let isInitialConversion = true; |
|
|
|
async function convertCurrency() { |
|
const amount = amountInput.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/${fromCurrency.value}`; |
|
|
|
|
|
const response = await fetch(url); |
|
const data = await response.json(); |
|
|
|
|
|
if (data.result === 'error') { |
|
resultDiv.innerHTML = `Error: ${data['error-type']}`; |
|
} else { |
|
const rate = data.conversion_rates[toCurrency.value]; |
|
const convertedAmount = (amount * rate).toFixed(2); |
|
resultDiv.innerHTML = `${amount} ${fromCurrency.value} = ${convertedAmount} ${toCurrency.value}`; |
|
|
|
|
|
if (isInitialConversion) { |
|
convertButton.style.display = 'none'; |
|
isInitialConversion = false; |
|
} |
|
} |
|
} catch (error) { |
|
resultDiv.innerHTML = "Error fetching conversion rate."; |
|
console.error("Error:", error); |
|
} |
|
} |
|
|
|
|
|
document.getElementById('swapButton').addEventListener('click', function () { |
|
const tempCurrency = fromCurrency.value; |
|
fromCurrency.value = toCurrency.value; |
|
toCurrency.value = tempCurrency; |
|
|
|
if (amountInput.value && amountInput.value > 0) { |
|
convertCurrency(); |
|
} |
|
}); |
|
|
|
|
|
convertButton.addEventListener('click', function () { |
|
convertCurrency(); |
|
}); |
|
|
|
|
|
amountInput.addEventListener('input', function () { |
|
if (!isInitialConversion) { |
|
convertCurrency(); |
|
} |
|
}); |
|
|
|
|
|
fromCurrency.addEventListener('change', function () { |
|
convertButton.style.display = 'block'; |
|
isInitialConversion = true; |
|
resultDiv.innerHTML = ""; |
|
}); |
|
|
|
toCurrency.addEventListener('change', function () { |
|
convertButton.style.display = 'block'; |
|
isInitialConversion = true; |
|
resultDiv.innerHTML = ""; |
|
}); |
|
|