This calculator allows you to perform currency conversions using a custom exchange rate you define. It's useful for quickly converting amounts between two currencies when a real-time market rate isn't readily available or when you need to apply a specific rate for a particular transaction.
function calculateExchangeRate() {
var amountToConvert = parseFloat(document.getElementById("amountToConvert").value);
var exchangeRate = parseFloat(document.getElementById("exchangeRate").value);
var sourceCurrency = document.getElementById("sourceCurrency").value;
var targetCurrency = document.getElementById("targetCurrency").value;
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Clear previous results
if (isNaN(amountToConvert) || isNaN(exchangeRate)) {
resultDiv.innerHTML = "Please enter valid numbers for amount and exchange rate.";
return;
}
if (amountToConvert < 0 || exchangeRate < 0) {
resultDiv.innerHTML = "Amount and exchange rate cannot be negative.";
return;
}
var convertedAmount = amountToConvert * exchangeRate;
// Format the result with currency names if provided, otherwise just the amount
var resultString = "";
if (sourceCurrency && targetCurrency) {
resultString = amountToConvert + " " + sourceCurrency.toUpperCase() + " is equal to " + convertedAmount.toFixed(2) + " " + targetCurrency.toUpperCase();
} else if (sourceCurrency) {
resultString = amountToConvert + " " + sourceCurrency.toUpperCase() + " is equal to " + convertedAmount.toFixed(2);
}
else {
resultString = convertedAmount.toFixed(2);
}
resultDiv.innerHTML = "Conversion Result: " + resultString + "";
}
#custom-exchange-rate-calculator {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
#custom-exchange-rate-calculator h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.input-row {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.input-row label {
flex: 1;
margin-right: 10px;
font-weight: bold;
color: #555;
}
.input-row input[type="text"],
.input-row input[type="number"] {
flex: 2;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}
#custom-exchange-rate-calculator button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
#custom-exchange-rate-calculator button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 10px;
border: 1px solid #eee;
background-color: #fff;
border-radius: 3px;
}
#result p {
margin: 0;
color: #333;
}