/* General Styles */
body {
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
line-height: 1.6;
}

h1 {
text-align: center;
color: #007BFF;
margin-top: 20px;
font-size: 2.5rem;
}

.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.converter {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}

.converter label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.converter input,
.converter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.converter button {
display: block;
width: 100%;
padding: 10px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.converter button:hover {
background: #0056b3;
}

.result {
margin-top: 10px;
font-weight: bold;
color: #007BFF;
}

/* Responsive Design */
@media (max-width: 600px) {
h1 {
font-size: 2rem;
}

.container {
padding: 10px;
}
}

Currency Converter

// API Key for ExchangeRate-API (Sign up at https://www.exchangerate-api.com/ to get a free API key)
const apiKey = ’38e35e72defcda5e066f8041′; // Replace with your API key
const apiUrl = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;

// Fetch currencies and populate dropdowns
async function fetchCurrencies() {
try {
const response = await fetch(apiUrl);
const data = await response.json();
const currencies = Object.keys(data.conversion_rates);

const fromCurrency = document.getElementById(‘fromCurrency’);
const toCurrency = document.getElementById(‘toCurrency’);

// Populate dropdowns with currencies
currencies.forEach(currency => {
const option1 = document.createElement(‘option’);
option1.value = currency;
option1.text = currency;
fromCurrency.appendChild(option1);

const option2 = document.createElement(‘option’);
option2.value = currency;
option2.text = currency;
toCurrency.appendChild(option2);
});

// Set default currencies
fromCurrency.value = ‘USD’;
toCurrency.value = ‘EUR’;
} catch (error) {
console.error(‘Error fetching currencies:’, error);
}
}

// Convert currency
async function convertCurrency() {
const amount = parseFloat(document.getElementById(‘amount’).value);
const fromCurrency = document.getElementById(‘fromCurrency’).value;
const toCurrency = document.getElementById(‘toCurrency’).value;

if (isNaN(amount)) {
alert(‘Please enter a valid amount.’);
return;
}

try {
const response = await fetch(`https://v6.exchangerate-api.com/v6/${apiKey}/pair/${fromCurrency}/${toCurrency}/${amount}`);
const data = await response.json();

if (data.result === ‘success’) {
const convertedAmount = data.conversion_result.toFixed(2);
document.getElementById(‘currencyResult’).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
} else {
alert(‘Error converting currency. Please try again.’);
}
} catch (error) {
console.error(‘Error converting currency:’, error);
alert(‘An error occurred. Please try again.’);
}
}

// Fetch currencies on page load
fetchCurrencies();