Weather Dashboard

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function WeatherDashboard() { const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default to NYC const [weatherData, setWeatherData] = useState(null); const [error, setError] = useState(null); useEffect(() => { async function fetchWeather() { try { 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); } catch (err) { setError("Could not fetch weather data"); } } fetchWeather(); }, [location]); function handleGeolocation() { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition( (position) => { setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude }); }, (err) => { setError("Could not get your location"); } ); } } function WeatherDisplay() { if (error) return

🌧️ {error}

; if (!weatherData) return

⏳ Loading...

; const currentWeather = weatherData.current_weather; return (

🌍 Weather Dashboard

🌡️ Temperature: {currentWeather.temperature}°C

💨 Wind Speed: {currentWeather.windspeed} km/h

🧭 Wind Direction: {currentWeather.winddirection}°

View Source

); } return ; } function App() { return ; } 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" } }); }

fantasticPinkCougar

Versions

v0