// Main Currency Converter app const { useState, useEffect, useRef, useMemo, useCallback } = React; function App() { const [from, setFrom] = useState("USD"); const [to, setTo] = useState("EUR"); const [amount, setAmount] = useState("100"); const [activeInput, setActiveInput] = useState("from"); // which side user is typing in const [rate, setRate] = useState(null); const [series, setSeries] = useState([]); const [loadingRate, setLoadingRate] = useState(false); const [loadingChart, setLoadingChart] = useState(false); const [lastUpdated, setLastUpdated] = useState(null); const [error, setError] = useState(null); const [swapCount, setSwapCount] = useState(0); const [revealing, setRevealing] = useState(false); const [burstId, setBurstId] = useState(0); // dramatic arrival burst const [copiedKey, setCopiedKey] = useState(null); // quick-cell copy feedback const [phase, setPhase] = useState(0); // 0..3 progressive disclosure const [timeframe, setTimeframe] = useState("1M"); // 1W, 1M, 3M, 1Y, 5Y // Progressive disclosure on mount useEffect(() => { const t1 = setTimeout(() => setPhase(1), 80); const t2 = setTimeout(() => setPhase(2), 320); const t3 = setTimeout(() => setPhase(3), 640); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, []); // Fetch current rate whenever from/to changes // Uses open.er-api.com (free, ~160 currencies, no key) with Frankfurter fallback useEffect(() => { if (from === to) { setRate(1); return; } let cancelled = false; setLoadingRate(true); setError(null); const tryFrankfurter = () => fetch(`https://api.frankfurter.dev/v1/latest?base=${from}&symbols=${to}`) .then(r => r.ok ? r.json() : Promise.reject(new Error("Rate fetch failed"))) .then(j => { if (cancelled) return; const r = j.rates?.[to]; if (typeof r !== "number") throw new Error("No rate returned"); setRate(r); setLastUpdated(new Date()); }); fetch(`https://open.er-api.com/v6/latest/${from}`) .then(r => r.ok ? r.json() : Promise.reject(new Error("Rate fetch failed"))) .then(j => { if (cancelled) return; if (j.result !== "success" || !j.rates || typeof j.rates[to] !== "number") { throw new Error("Rate unavailable"); } setRate(j.rates[to]); const ts = j.time_last_update_unix ? new Date(j.time_last_update_unix * 1000) : new Date(); setLastUpdated(ts); }) .catch(() => tryFrankfurter().catch(err => { if (!cancelled) setError(err.message); })) .finally(() => { if (!cancelled) setLoadingRate(false); }); return () => { cancelled = true; }; }, [from, to]); // Historical series — only available for ECB-tracked currencies const histAvailable = window.FRANKFURTER_CODES.has(from) && window.FRANKFURTER_CODES.has(to); useEffect(() => { if (from === to) { setSeries([]); return; } if (!histAvailable) { setSeries([]); setLoadingChart(false); return; } let cancelled = false; setLoadingChart(true); const days = { "1W": 7, "1M": 30, "3M": 90, "1Y": 365, "5Y": 365 * 5 }[timeframe] || 30; const end = new Date(); const start = new Date(end.getTime() - days * 24 * 60 * 60 * 1000); const fmt = d => d.toISOString().slice(0, 10); fetch(`https://api.frankfurter.dev/v1/${fmt(start)}..${fmt(end)}?base=${from}&symbols=${to}`) .then(r => r.ok ? r.json() : Promise.reject(new Error("History fetch failed"))) .then(j => { if (cancelled) return; const rates = j.rates || {}; let arr = Object.keys(rates).sort().map(date => ({ date, value: rates[date][to], })).filter(d => typeof d.value === "number"); if (arr.length > 260) { const step = Math.ceil(arr.length / 260); arr = arr.filter((_, i) => i % step === 0 || i === arr.length - 1); } setSeries(arr); }) .catch(() => { if (!cancelled) setSeries([]); }) .finally(() => { if (!cancelled) setLoadingChart(false); }); return () => { cancelled = true; }; }, [from, to, timeframe, histAvailable]); // Compute the OTHER side's value based on active input + rate const round2 = (n) => (Math.round((Number(n) || 0) * 100) / 100).toString(); // Reversed (user typing in `to`, want from value) const [reverseAmount, setReverseAmount] = useState(""); // When rate changes, sync the inactive side (rounded to 2 decimals) useEffect(() => { if (rate == null) return; if (activeInput === "from") { setReverseAmount(round2((parseFloat(amount) || 0) * rate)); } else { setAmount(round2((parseFloat(reverseAmount) || 0) / rate)); } // eslint-disable-next-line }, [rate]); const amountNum = parseFloat(amount) || 0; const reverseNum = parseFloat(reverseAmount) || 0; const swap = () => { if (navigator.vibrate) navigator.vibrate([10, 30, 10]); setSwapCount(c => c + 1); setRevealing(true); setTimeout(() => setRevealing(false), 900); setFrom(to); setTo(from); setAmount(reverseAmount); setReverseAmount(amount); setActiveInput(activeInput === "from" ? "to" : "from"); }; const fromCur = window.CURRENCY_BY_CODE[from]; const toCur = window.CURRENCY_BY_CODE[to]; // Live updated indicator pulse + processing reveal + arrival burst whenever rate refreshes const [pulse, setPulse] = useState(0); useEffect(() => { if (rate == null) return; setPulse(p => p + 1); setRevealing(true); setBurstId(b => b + 1); if (navigator.vibrate) navigator.vibrate(6); const t = setTimeout(() => setRevealing(false), 900); return () => clearTimeout(t); }, [rate]); // Temperature / trend (drives ambient tint) const trendDelta = useMemo(() => { if (!series || series.length < 2) return 0; const first = series[0].value, last = series[series.length - 1].value; if (!first) return 0; return (last - first) / first; }, [series]); const trendClass = trendDelta > 0.001 ? "warm" : trendDelta < -0.001 ? "cool" : "neutral"; // Copy a quick-cell value to clipboard with cinematic feedback const copyQuick = (key, text) => { if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {}); if (navigator.vibrate) navigator.vibrate([6, 20, 6]); setCopiedKey(key); setTimeout(() => setCopiedKey(c => (c === key ? null : c)), 1400); }; return ( <>

Real-Time Currency Converter

Live exchange rates across 30+ currencies — powered by the European Central Bank. Convert instantly in both directions. Free, accurate, and updated every business day.

{error ? "ERROR" : "MARKET LIVE"}
UPDATED {lastUpdated ? lastUpdated.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "—"}
SRC FRANKFURTER · ECB
{/* FROM */}
{fromCur.symbol}
{activeInput === "from" ? ( { const v = e.target.value.replace(/[^\d.]/g, ""); setAmount(v); setActiveInput("from"); if (rate != null) setReverseAmount(round2((parseFloat(v) || 0) * rate)); }} placeholder="0.00" /> ) : ( )}
{/* SWAP */} {/* TO */}
{toCur.symbol}
{activeInput === "to" ? ( { const v = e.target.value.replace(/[^\d.]/g, ""); setReverseAmount(v); setActiveInput("to"); if (rate != null && rate !== 0) setAmount(round2((parseFloat(v) || 0) / rate)); }} placeholder="0.00" /> ) : ( )}
{/* Rate readout */}
EXCHANGE RATE 1 {from} = {rate != null ? : "—"} {to} This is the mid-market exchange rate — the rate banks use between themselves. It's sourced from the European Central Bank and refreshed every business day.
INVERSE 1 {to} = {rate ? (1 / rate).toFixed(6) : "—"} {from}
{/* Quick preset chips — tap to set the amount. Lives above the chart so users can frame the conversion before the history visualization. */}
Quick amounts — tap to set Click any chip to instantly set the amount on the left side. The converted value updates with a live animation.
{[1, 10, 100, 1000, 10000].map((n, i) => { const isActive = parseFloat(amount) === n && activeInput === "from"; const previewText = rate ? `${toCur.symbol}${(n * rate).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"; const labelShort = n >= 1000 ? `${n / 1000}K` : `${n}`; return ( ); })}
{/* Chart */}
{ if (navigator.vibrate) navigator.vibrate(5); setTimeframe(t); }} />
{/* Bridges the converter back to the site's visa flow — clicking the button opens ClearForTravel with origin + destination auto-populated from the currently picked currencies. */}
Travel-ready in minutes
Going from {fromCur.name} to {toCur.name}?
Get your visa, eVisa, or entry authorization sorted before you fly. Skip the embassy queue — apply online in a few steps.
Start My Application
RATES SOURCED FROM EUROPEAN CENTRAL BANK VIA FRANKFURTER.DEV NO API KEY · NO TRACKING · UPDATED EACH BUSINESS DAY ~16:00 CET
); } ReactDOM.createRoot(document.getElementById("root")).render();