Currency Converter
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
#converter {
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
font-size: 16px;
margin-right: 10px;
}
input[type="number"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-right: 10px;
}
select {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
#converted-amount {
font-size: 24px;
margin-top: 10px;
}
// scripts.js
async function fetchCurrencies() {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
const data = await response.json();
const currencies = Object.keys(data.rates);
const fromCurrencySelect = document.getElementById('from-currency');
const toCurrencySelect = document.getElementById('to-currency');
currencies.forEach(currency => {
const option = document.createElement('option');
option.value = currency;
option.textContent = currency;
fromCurrencySelect.appendChild(option);
const option2 = document.createElement('option');
option2.value = currency;
option2.textContent = currency;
toCurrencySelect.appendChild(option2);
});
}
fetchCurrencies();
async function convert() {
const fromCurrency = document.getElementById('from-currency').value;
const toCurrency = document.getElementById('to-currency').value;
const amount = parseFloat(document.getElementById('amount').value);
if (isNaN(amount)) {
alert('Please enter a valid amount.');
return;
}
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);
document.getElementById('converted-amount').textContent = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
}
No comments:
Post a Comment