Exchange Rate Calculator
This calculator helps you convert amounts between different currencies using current exchange rates. Simply enter the amount you wish to convert, select the base currency you are converting from, and the target currency you are converting to. The calculator will then display the equivalent amount in the target currency.
function calculateExchangeRate() {
var amount = parseFloat(document.getElementById("amount").value);
var baseCurrency = document.getElementById("baseCurrency").value;
var targetCurrency = document.getElementById("targetCurrency").value;
// Placeholder for real exchange rates – In a real application, you would fetch these from an API.
// For this example, we'll use static rates.
var exchangeRates = {
"USD": {
"EUR": 0.93,
"GBP": 0.79,
"JPY": 150.00,
"CAD": 1.36
},
"EUR": {
"USD": 1.08,
"GBP": 0.85,
"JPY": 161.00,
"CAD": 1.46
},
"GBP": {
"USD": 1.27,
"EUR": 1.18,
"JPY": 189.00,
"CAD": 1.72
},
"JPY": {
"USD": 0.0067,
"EUR": 0.0062,
"GBP": 0.0053,
"CAD": 0.0090
},
"CAD": {
"USD": 0.74,
"EUR": 0.69,
"GBP": 0.58,
"JPY": 111.00
}
};
if (isNaN(amount) || amount <= 0) {
document.getElementById("result").innerHTML = "Please enter a valid positive amount.";
return;
}
var result = 0;
if (baseCurrency === targetCurrency) {
result = amount;
} else {
var rate = exchangeRates[baseCurrency] ? exchangeRates[baseCurrency][targetCurrency] : null;
if (rate) {
result = amount * rate;
} else {
document.getElementById("result").innerHTML = "Exchange rate not available for this currency pair.";
return;
}
}
document.getElementById("result").innerHTML = "Converted Amount: " + result.toFixed(2) + " " + targetCurrency;
}
.exchange-rate-calculator {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
max-width: 400px;
margin: 20px auto;
background-color: #f9f9f9;
}
.exchange-rate-calculator h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.exchange-rate-calculator p {
text-align: center;
color: #555;
margin-bottom: 20px;
font-size: 0.9em;
}
.calculator-inputs .input-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.calculator-inputs label {
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.calculator-inputs input[type="number"],
.calculator-inputs select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
}
.calculator-inputs button {
width: 100%;
padding: 12px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.calculator-inputs button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
text-align: center;
font-size: 1.1em;
color: #333;
}