/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function CurrencyConverter() { const [rates, setRates] = useState({}); const [amount, setAmount] = useState(1); const [fromCurrency, setFromCurrency] = useState('USD'); const [toCurrency, setToCurrency] = useState('EUR'); const [convertedAmount, setConvertedAmount] = useState(null); useEffect(() => { async function fetchRates() { try { const response = await fetch(`/rates?base=${fromCurrency}`); const data = await response.json(); setRates(data.rates); } catch (error) { console.error("Failed to fetch rates:", error); } } fetchRates(); }, [fromCurrency]); useEffect(() => { if (rates[toCurrency]) { setConvertedAmount((amount * rates[toCurrency]).toFixed(2)); } }, [amount, fromCurrency, toCurrency, rates]); const commonCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD', 'AUD', 'CHF', 'CNY', 'INR']; return (

💱 Currency Converter

Amount setAmount(Number(e.target.value))} min="0" />

From Currency

To Currency

{convertedAmount && (

{amount} {fromCurrency} = {convertedAmount} {toCurrency}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === '/rates') { const baseCurrency = url.searchParams.get('base') || 'USD'; try { const response = await fetch(`https://open.exchangerate-api.com/v6/latest/${baseCurrency}`); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Failed to fetch rates' }), { status: 500 }); } } return new Response(` Currency Converter

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } .currency-converter { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; margin-bottom: 30px; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; color: #666; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; } .result { text-align: center; background-color: #f0f0f0; padding: 15px; border-radius: 5px; } footer { text-align: center; margin-top: 20px; font-size: 12px; } @media (max-width: 600px) { .currency-converter { width: 100%; padding: 15px; } } `;

kingofkwl