/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useMemo, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const LOCATIONS = { Brooklyn: { lat: 40.6782, lon: -73.9442, timezone: 'America/New_York' }, Manhattan: { lat: 40.7128, lon: -74.0060, timezone: 'America/New_York' }, Queens: { lat: 40.7282, lon: -73.7949, timezone: 'America/New_York' }, StatenIsland: { lat: 40.5795, lon: -74.1502, timezone: 'America/New_York' }, Bronx: { lat: 40.8448, lon: -73.8648, timezone: 'America/New_York' }, // European Regions London: { lat: 51.5074, lon: -0.1278, timezone: 'Europe/London' }, Paris: { lat: 48.8566, lon: 2.3522, timezone: 'Europe/Paris' }, Berlin: { lat: 52.5200, lon: 13.4050, timezone: 'Europe/Berlin' }, Madrid: { lat: 40.4168, lon: -3.7038, timezone: 'Europe/Madrid' }, Rome: { lat: 41.9028, lon: 12.4964, timezone: 'Europe/Rome' }, Amsterdam: { lat: 52.3676, lon: 4.9041, timezone: 'Europe/Amsterdam' }, Stockholm: { lat: 59.3293, lon: 18.0686, timezone: 'Europe/Stockholm' }, Copenhagen: { lat: 55.6761, lon: 12.5683, timezone: 'Europe/Copenhagen' }, Vienna: { lat: 48.2082, lon: 16.3738, timezone: 'Europe/Vienna' }, Prague: { lat: 50.0755, lon: 14.4378, timezone: 'Europe/Prague' }, // Post-Soviet Regions Moscow: { lat: 55.7558, lon: 37.6173, timezone: 'Europe/Moscow' }, StPetersburg: { lat: 59.9343, lon: 30.3351, timezone: 'Europe/Moscow' }, Kyiv: { lat: 50.4501, lon: 30.5234, timezone: 'Europe/Kyiv' }, Minsk: { lat: 53.9006, lon: 27.5590, timezone: 'Europe/Minsk' }, Almaty: { lat: 43.2220, lon: 76.8512, timezone: 'Asia/Almaty' }, Riga: { lat: 56.9496, lon: 24.1052, timezone: 'Europe/Riga' }, Vilnius: { lat: 54.6892, lon: 25.2798, timezone: 'Europe/Vilnius' }, Tallinn: { lat: 59.4370, lon: 24.7536, timezone: 'Europe/Tallinn' }, Tbilisi: { lat: 41.7151, lon: 44.8271, timezone: 'Europe/Tbilisi' }, Baku: { lat: 40.4093, lon: 49.8671, timezone: 'Asia/Baku' }, Chisinau: { lat: 47.0056, lon: 28.8575, timezone: 'Europe/Chisinau' }, Tiraspol: { lat: 46.8431, lon: 29.6208, timezone: 'Europe/Chisinau' } // Transnistria }; // Fuzzy search function function fuzzySearch(locations, query) { if (!query) return Object.keys(locations); const lowerQuery = query.toLowerCase(); return Object.keys(locations).filter(location => location.toLowerCase().includes(lowerQuery) ); } // Find best match for autocomplete function findBestMatch(locations, query) { const lowerQuery = query.toLowerCase(); const exactMatch = Object.keys(locations).find( location => location.toLowerCase() === lowerQuery ); if (exactMatch) return exactMatch; const startsWith = Object.keys(locations).find( location => location.toLowerCase().startsWith(lowerQuery) ); if (startsWith) return startsWith; const includes = Object.keys(locations).find( location => location.toLowerCase().includes(lowerQuery) ); return includes || null; } function WeatherApp() { const [weather, setWeather] = useState(null); const [loading, setLoading] = useState(true); const [region, setRegion] = useState('Moscow'); const [searchQuery, setSearchQuery] = useState(''); const [localTime, setLocalTime] = useState(new Date()); const searchInputRef = useRef(null); // Fuzzy search results const filteredLocations = useMemo(() => fuzzySearch(LOCATIONS, searchQuery), [searchQuery] ); // Update local time every second useEffect(() => { const timer = setInterval(() => { setLocalTime(new Date()); }, 1000); return () => clearInterval(timer); }, [region]); useEffect(() => { setLoading(true); fetch(`/weather?region=${region}`) .then(response => response.json()) .then(data => { setWeather(data); setLoading(false); }) .catch(error => { console.error('Error fetching weather:', error); setLoading(false); }); }, [region]); // Format local time in 24h format const formattedLocalTime = useMemo(() => { const locationData = LOCATIONS[region]; if (!locationData) return localTime.toLocaleString(); return new Intl.DateTimeFormat('en-GB', { timeZone: locationData.timezone, dateStyle: 'medium', timeStyle: 'short', hour12: false }).format(localTime); }, [localTime, region]); const handleRegionChange = (selectedRegion) => { setRegion(selectedRegion); setSearchQuery(''); // Reset search query }; const handleSearchKeyDown = (e) => { if (e.key === 'Enter') { const bestMatch = findBestMatch(LOCATIONS, searchQuery); if (bestMatch) { handleRegionChange(bestMatch); e.target.blur(); // Remove focus from input } } }; if (loading) return

Loading weather...

; if (!weather) return

Unable to fetch weather

; return (

🌍 {region} Weather

setSearchQuery(e.target.value)} onKeyDown={handleSearchKeyDown} style={{ marginBottom: '20px', padding: '10px', fontSize: '16px', width: '100%', boxSizing: 'border-box' }} />

🕒 Local Time: {formattedLocalTime}

🌡️ Temperature: {weather.current.temperature_2m}°C

💧 Humidity: {weather.current.relative_humidity_2m}%

💨 Wind Speed: {weather.current.wind_speed_10m} km/h

View Source

); } 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); const regionParam = url.searchParams.get('region') || 'Moscow'; const selectedLocation = LOCATIONS[regionParam as keyof typeof LOCATIONS] || LOCATIONS.Moscow; const weatherResponse = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${selectedLocation.lat}&longitude=${selectedLocation.lon}¤t=temperature_2m,relative_humidity_2m,wind_speed_10m` ); const weatherData = await weatherResponse.json(); if (request.headers.get('accept')?.includes('text/html')) { return new Response(` ${regionParam} Weather

`, { headers: { 'Content-Type': 'text/html' } }); } return new Response(JSON.stringify(weatherData), { headers: { 'Content-Type': 'application/json' } }); }

WeatherAndTime

Version 2