/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function WeatherDashboard() { const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default to New York City const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchWeather() { try { setLoading(true); const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m`, ); const data = await response.json(); setWeatherData(data); setLoading(false); } catch (error) { console.error("Weather fetch error:", error); setLoading(false); } } fetchWeather(); }, [location]); const handleLocationChange = (e) => { const [lat, lon] = e.target.value.split(",").map(coord => parseFloat(coord.trim())); setLocation({ latitude: lat, longitude: lon }); }; if (loading) return

Loading weather data...

; if (!weatherData) return

Unable to fetch weather

; return (

🌦️ Weather Dashboard

Enter Coordinates (Latitude, Longitude):

Current Weather

🌡️ Temperature: {weatherData.current_weather.temperature}°C

💨 Wind Speed: {weatherData.current_weather.windspeed} km/h

🧭 Wind Direction: {weatherData.current_weather.winddirection}°

📍 Latitude: {location.latitude}

📍 Longitude: {location.longitude}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Weather Dashboard

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Arial', sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .weather-dashboard { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .location-input input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; } .weather-details { display: flex; justify-content: space-between; margin-top: 20px; } .current-weather, .location-info { background-color: #f9f9f9; padding: 15px; border-radius: 6px; } `;

FHworld

Version 2