Free Online Currency Converter tool Script, This tool can convert all international currencies to the local currency rate, it is very use full tool you can copy and paste this tool, very easy to embed in your webpages. this script contains javascript and simple html and css. just copy and paste the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #4facfe, #00f2fe);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.converter {
background: #1e293b;
border-radius: 10px;
padding: 20px;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
.field {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select, input {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
background: #06b6d4;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #0284c7;
}
.result {
text-align: center;
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
@media (max-width: 600px) {
.converter {
padding: 15px;
width: 90%;
}
}
</style>
</head>
<body>
<div class="converter">
<h1>Currency Converter</h1>
<div class="field">
<label for="from-currency">From:</label>
<select id="from-currency"></select>
</div>
<div class="field">
<label for="to-currency">To:</label>
<select id="to-currency"></select>
</div>
<div class="field">
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount" />
</div>
<button id="convert">Convert</button>
<div class="result" id="result">Enter values to convert</div>
</div>
<script>
const fromCurrency = document.getElementById('from-currency');
const toCurrency = document.getElementById('to-currency');
const amount = document.getElementById('amount');
const convertBtn = document.getElementById('convert');
const resultDiv = document.getElementById('result');
async function fetchCurrencies() {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
const data = await response.json();
const currencies = Object.keys(data.rates);
currencies.forEach(currency => {
const optionFrom = document.createElement('option');
optionFrom.value = currency;
optionFrom.textContent = currency;
fromCurrency.appendChild(optionFrom);
const optionTo = document.createElement('option');
optionTo.value = currency;
optionTo.textContent = currency;
toCurrency.appendChild(optionTo);
});
}
async function convertCurrency() {
const fromValue = fromCurrency.value;
const toValue = toCurrency.value;
const amountValue = parseFloat(amount.value);
if (isNaN(amountValue) || amountValue <= 0) {
resultDiv.textContent = 'Please enter a valid amount';
return;
}
const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromValue}`);
const data = await response.json();
const rate = data.rates[toValue];
const convertedAmount = (amountValue * rate).toFixed(2);
resultDiv.textContent = `${amountValue} ${fromValue} = ${convertedAmount} ${toValue}`;
}
fetchCurrencies();
convertBtn.addEventListener('click', convertCurrency);
</script>
</body>
</html>
No comments:
Post a Comment