Foreign Exchange Rate Calculator
This calculator helps you convert amounts between different currencies using the current or a specified exchange rate.
USD (US Dollar)
EUR (Euro)
GBP (British Pound)
JPY (Japanese Yen)
CAD (Canadian Dollar)
AUD (Australian Dollar)
USD (US Dollar)
EUR (Euro)
GBP (British Pound)
JPY (Japanese Yen)
CAD (Canadian Dollar)
AUD (Australian Dollar)
function calculateFxRate() {
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 result
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 must be positive.";
return;
}
var convertedAmount = amountToConvert * exchangeRate;
resultDiv.innerHTML = "
Converted Amount: " + convertedAmount.toFixed(2) + " " + targetCurrency + "";
}
.fx-rate-calculator {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.fx-rate-calculator h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.fx-rate-calculator p {
color: #555;
line-height: 1.6;
}
.fx-rate-calculator .input-section {
margin-bottom: 20px;
}
.fx-rate-calculator label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #444;
}
.fx-rate-calculator input[type="number"],
.fx-rate-calculator select {
width: calc(100% – 22px); /* Account for padding and border */
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.fx-rate-calculator button {
display: block;
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.fx-rate-calculator button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
text-align: center;
font-size: 1.1em;
}
#result p {
margin: 0;
color: #212529;
}