|
|
|
async function convertCurrency() { |
|
const amount = document.getElementById('amount').value; |
|
const fromCurrency = document.getElementById('from-currency').value; |
|
const toCurrency = document.getElementById('to-currency').value; |
|
const result = document.getElementById('result'); |
|
const convertBtn = document.getElementById('convert-btn'); |
|
|
|
|
|
if (amount && fromCurrency && toCurrency) { |
|
try { |
|
|
|
const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`); |
|
const data = await response.json(); |
|
const rate = data.rates[toCurrency]; |
|
const convertedAmount = (amount * rate).toFixed(2); |
|
|
|
|
|
result.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; |
|
|
|
|
|
convertBtn.style.display = 'none'; |
|
} catch (error) { |
|
result.innerText = "Error fetching exchange rates!"; |
|
} |
|
} |
|
} |
|
|
|
|
|
function swapCurrencies() { |
|
const fromCurrency = document.getElementById('from-currency'); |
|
const toCurrency = document.getElementById('to-currency'); |
|
|
|
|
|
const temp = fromCurrency.value; |
|
fromCurrency.value = toCurrency.value; |
|
toCurrency.value = temp; |
|
|
|
|
|
convertCurrency(); |
|
} |
|
|
|
|
|
document.getElementById('amount').addEventListener('input', convertCurrency); |
|
|
|
|
|
document.getElementById('from-currency').addEventListener('change', () => { |
|
document.getElementById('convert-btn').style.display = 'block'; |
|
document.getElementById('result').innerHTML = ''; |
|
}); |
|
|
|
document.getElementById('to-currency').addEventListener('change', () => { |
|
document.getElementById('convert-btn').style.display = 'block'; |
|
document.getElementById('result').innerHTML = ''; |
|
}); |
|
|
|
|
|
window.onscroll = function() { |
|
const navbar = document.querySelector('.navbar'); |
|
const howToUse = document.querySelector('.how-to-use'); |
|
const steps = document.querySelector('.steps'); |
|
const footer = document.querySelector('footer'); |
|
|
|
if (window.scrollY > 200) { |
|
navbar.style.backgroundColor = '#004d00'; |
|
howToUse.style.backgroundColor = '#004d00'; |
|
steps.forEach(step => { |
|
step.style.backgroundColor = '#004d00'; |
|
}); |
|
footer.style.backgroundColor = '#666666'; |
|
} else { |
|
navbar.style.backgroundColor = '#006400'; |
|
howToUse.style.backgroundColor = '#006400'; |
|
steps.forEach(step => { |
|
step.style.backgroundColor = '#006400'; |
|
}); |
|
footer.style.backgroundColor = '#808080'; |
|
} |
|
}; |
|
|
|
|
|
function loadCurrencies() { |
|
const currencies = [ |
|
'BND', 'KHR', 'IDR', 'LAK', 'MYR', 'MMK', 'PHP', 'SGD', 'THB', 'VND', |
|
'EUR', 'GBP', 'CHF', 'RUB', 'TRY', 'USD', 'CAD', 'BRL', 'ARS', 'ZAR', |
|
'JPY', 'CNY', 'KRW', 'KPW', 'HKD' |
|
]; |
|
|
|
const fromCurrency = document.getElementById('from-currency'); |
|
const toCurrency = document.getElementById('to-currency'); |
|
|
|
currencies.forEach(currency => { |
|
const optionFrom = document.createElement('option'); |
|
optionFrom.value = currency; |
|
optionFrom.textContent = `${currency}`; |
|
fromCurrency.appendChild(optionFrom); |
|
|
|
const optionTo = document.createElement('option'); |
|
optionTo.value = currency; |
|
optionTo.textContent = `${currency}`; |
|
toCurrency.appendChild(optionTo); |
|
}); |
|
} |
|
|
|
|
|
window.onload = loadCurrencies; |