Beginner 15 minutes
Build a Currency Converter
Create a simple currency converter with live exchange rates. Convert between any world currencies in real-time.
What You'll Build
A currency converter that fetches live exchange rates and converts amounts between any two currencies.
Prerequisites
- ✓ Basic JavaScript knowledge
1
Get your API key
Sign up at exchangerate.host to get a free API key. The free tier provides daily updated rates for 100 requests per month.
2
List available currencies
Fetch the list of supported currencies to see what conversions are available.
javascript
const response = await fetch(
'https://api.exchangerate.host/list?access_key=YOUR_API_KEY'
);
const data = await response.json();
console.log('Available currencies:');
Object.entries(data.currencies).slice(0, 10).forEach(([code, name]) => {
console.log(` ${code}: ${name}`);
});
console.log(` ... and ${Object.keys(data.currencies).length - 10} more`); 3
Convert between currencies
Use the convert endpoint to convert an amount from one currency to another.
javascript
const from = 'USD';
const to = 'EUR';
const amount = 100;
const response = await fetch(
`https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}&access_key=YOUR_API_KEY`
);
const data = await response.json();
console.log(`${amount} ${from} = ${data.result.toFixed(2)} ${to}`);
console.log(`Rate: 1 ${from} = ${data.info.quote.toFixed(4)} ${to}`); 4
Build a reusable converter function
Create a function that handles multiple conversions and error cases.
javascript
async function convertCurrency(amount, from, to) {
const response = await fetch(
`https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}&access_key=YOUR_API_KEY`
);
const data = await response.json();
if (!data.success) {
throw new Error('Conversion failed. Check currency codes.');
}
return {
from: `${amount} ${from}`,
to: `${data.result.toFixed(2)} ${to}`,
rate: data.info.quote
};
}
// Convert various amounts
const conversions = await Promise.all([
convertCurrency(100, 'USD', 'EUR'),
convertCurrency(100, 'USD', 'GBP'),
convertCurrency(100, 'USD', 'JPY')
]);
conversions.forEach(c => {
console.log(`${c.from} = ${c.to}`);
}); Next Steps
- → Add historical rate comparison
- → Build a multi-currency calculator UI
- → Add a chart showing rate trends over time