<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OANDA Style Currency Gadget</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 15px;
background: #f8f9fa;
color: #333;
}
.gadget {
max-width: 420px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
header {
background: #003087;
color: white;
padding: 15px 20px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
.converter {
padding: 20px;
border-bottom: 1px solid #eee;
}
input, select, button {
padding: 10px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1em;
}
input[type="number"] {
width: 100%;
}
.row {
display: flex;
gap: 10px;
}
.row select {
flex: 1;
}
button {
background: #003087;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
}
button:hover {
background: #002266;
}
.result {
margin-top: 15px;
font-size: 1.4em;
font-weight: bold;
text-align: center;
color: #003087;
}
.rates {
padding: 15px 20px;
}
.rates h3 {
margin: 0 0 10px 0;
color: #555;
font-size: 1.1em;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background: #f1f1f1;
font-weight: 600;
}
.bid { color: #006400; }
.ask { color: #b22222; }
.last-updated {
font-size: 0.85em;
color: #777;
text-align: center;
margin-top: 10px;
}
.refresh-btn {
background: none;
border: 1px solid #ccc;
color: #555;
padding: 5px 10px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="gadget">
<header>OANDA Style Live Rates</header>
<!-- Converter Section -->
<div class="converter">
<h3>Currency Converter</h3>
<input type="number" id="amount" value="1" placeholder="Amount">
<div class="row">
<select id="from"></select>
<select id="to"></select>
</div>
<button onclick="convertCurrency()" style="width:100%; margin-top:10px;">Convert</button>
<div class="result" id="conversionResult"></div>
</div>
<!-- Live Rates Table -->
<div class="rates">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3>Major Pairs (USD Base)</h3>
<button class="refresh-btn" onclick="loadRates()">↻ Refresh</button>
</div>
<table id="ratesTable">
<thead>
<tr>
<th>Pair</th>
<th class="bid">Bid</th>
<th class="ask">Ask</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="last-updated" id="lastUpdated"></div>
</div>
</div>
<script>
// Free API (get your free key at https://www.exchangerate-api.com/)
const API_KEY = 'YOUR_FREE_API_KEY_HERE'; // ← Replace with your key
const BASE_URL = `https://v6.exchangerate-api.com/v6/${API_KEY}`;
const popularCurrencies = ['USD','EUR','GBP','INR','JPY','CAD','AUD','CHF','CNY','AED'];
async function fetchRates() {
try {
const res = await fetch(`${BASE_URL}/latest/USD`);
const data = await res.json();
if (data.result !== 'success') throw new Error('API error');
return data.conversion_rates;
} catch (err) {
console.error(err);
return null;
}
}
function populateDropdowns(rates) {
const fromSelect = document.getElementById('from');
const toSelect = document.getElementById('to');
fromSelect.innerHTML = '';
toSelect.innerHTML = '';
Object.keys(rates).forEach(currency => {
if (!popularCurrencies.includes(currency)) return;
const opt1 = document.createElement('option');
opt1.value = currency;
opt1.textContent = currency;
fromSelect.appendChild(opt1);
const opt2 = opt1.cloneNode(true);
toSelect.appendChild(opt2);
});
// Default values
fromSelect.value = 'USD';
toSelect.value = 'INR';
}
async function loadRates() {
const rates = await fetchRates();
if (!rates) {
document.getElementById('lastUpdated').textContent = 'Failed to load rates';
return;
}
const tbody = document.querySelector('#ratesTable tbody');
tbody.innerHTML = '';
// Show some major pairs against USD
const pairs = ['EUR','GBP','INR','JPY','CAD','AUD','CHF'];
pairs.forEach(pair => {
if (!rates[pair]) return;
const rate = rates[pair];
const bid = (rate * 0.9995).toFixed(4); // simulate small spread
const ask = (rate * 1.0005).toFixed(4);
const row = document.createElement('tr');
row.innerHTML = `
<td><strong>USD/${pair}</strong></td>
<td class="bid">${bid}</td>
<td class="ask">${ask}</td>
`;
tbody.appendChild(row);
});
document.getElementById('lastUpdated').textContent =
`Last updated: ${new Date().toLocaleTimeString()}`;
}
async function convertCurrency() {
const amount = parseFloat(document.getElementById('amount').value) || 1;
const from = document.getElementById('from').value;
const to = document.getElementById('to').value;
if (from === to) {
document.getElementById('conversionResult').textContent = `${amount} ${from} = ${amount} ${to}`;
return;
}
try {
const res = await fetch(`${BASE_URL}/pair/${from}/${to}`);
const data = await res.json();
if (data.result === 'success') {
const converted = (amount * data.conversion_rate).toFixed(4);
document.getElementById('conversionResult').innerHTML =
`${amount} ${from} = <strong>${converted} ${to}</strong>`;
} else {
document.getElementById('conversionResult').textContent = 'Conversion failed';
}
} catch (e) {
document.getElementById('conversionResult').textContent = 'Error fetching rate';
}
}
// Initialize
async function init() {
const rates = await fetchRates();
if (rates) {
populateDropdowns(rates);
loadRates();
}
}
// Auto refresh every 60 seconds
setInterval(() => {
loadRates();
}, 60000);
init();
</script>
</body>
</html>
0 $type={blogger}:
Post a Comment