|
|
|
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://v6.exchangerate-api.com/v6/YOUR_API_KEY/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 headline = document.querySelector('.headline'); |
|
const steps = document.querySelector('.steps'); |
|
const footer = document.querySelector('.footer'); |
|
|
|
if (window.scrollY > 200) { |
|
navbar.style.backgroundColor = '#004d00'; |
|
headline.style.backgroundColor = '#004d00'; |
|
steps.style.backgroundColor = '#004d00'; |
|
footer.style.backgroundColor = '#666666'; |
|
} else { |
|
navbar.style.backgroundColor = '#006400'; |
|
headline.style.backgroundColor = '#006400'; |
|
steps.style.backgroundColor = '#006400'; |
|
footer.style.backgroundColor = '#808080'; |
|
} |
|
}; |
|
|
|
|
|
document.getElementById('swap-btn').addEventListener('click', swapCurrencies); |