Exchange Rate Calculator
This calculator helps you convert an amount from one currency to another using a given exchange rate. It's a straightforward tool for understanding how much of a target currency you'll receive for a specific amount of a base currency.
Amount to Convert:
Base Currency:
Target Currency:
Exchange Rate (1 Base = X Target):
Convert
function calculateExchangeRate() {
var amountToConvert = parseFloat(document.getElementById("amountToConvert").value);
var baseCurrency = document.getElementById("baseCurrency").value.trim().toUpperCase();
var targetCurrency = document.getElementById("targetCurrency").value.trim().toUpperCase();
var exchangeRate = parseFloat(document.getElementById("exchangeRate").value);
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Clear previous results
if (isNaN(amountToConvert) || amountToConvert <= 0) {
resultDiv.innerHTML = "Please enter a valid positive amount to convert.";
return;
}
if (baseCurrency === "") {
resultDiv.innerHTML = "Please enter the base currency.";
return;
}
if (targetCurrency === "") {
resultDiv.innerHTML = "Please enter the target currency.";
return;
}
if (isNaN(exchangeRate) || exchangeRate <= 0) {
resultDiv.innerHTML = "Please enter a valid positive exchange rate.";
return;
}
var convertedAmount = amountToConvert * exchangeRate;
resultDiv.innerHTML =
"" + amountToConvert + " " + baseCurrency + " is equal to
" + convertedAmount.toFixed(2) + " " + targetCurrency + " ";
}
#exchange-rate-calculator {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
#exchange-rate-calculator h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-group input[type="number"],
.input-group input[type="text"] {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#exchange-rate-calculator button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
display: block;
width: 100%;
margin-top: 20px;
}
#exchange-rate-calculator button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #e0ffe0;
border: 1px solid #b3ffb3;
border-radius: 4px;
text-align: center;
font-size: 1.1em;
}