/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function Home() { return (

Welcome to Weather App

Select Weather Dashboard from the menu to check current weather conditions.

); } function WeatherDashboard() { const [weather, setWeather] = useState(null); const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default NYC const [city, setCity] = useState('New York City'); 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(); setWeather(data); } catch (err) { setError('Failed to fetch weather data'); console.error(err); } } fetchWeather(); }, [location]); function handleLocationSubmit(e) { e.preventDefault(); // Basic geocoding (very simple, could be improved) const cityCoordinates = { 'New York City': { latitude: 40.7128, longitude: -74.0060 }, 'Los Angeles': { latitude: 34.0522, longitude: -118.2437 }, 'Chicago': { latitude: 41.8781, longitude: -87.6298 }, 'Houston': { latitude: 29.7604, longitude: -95.3698 }, 'Phoenix': { latitude: 33.4484, longitude: -112.0740 } }; const coords = cityCoordinates[city]; if (coords) { setLocation(coords); } else { setError('City not found'); } } return (

🌤️ Weather Dashboard

{error &&

{error}

} {weather && (

{city}

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

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

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

)}

); } function App() { const [currentPage, setCurrentPage] = useState('home'); return (

{currentPage === 'home' && } {currentPage === 'weather' && }

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

`, { headers: { "content-type": "text/html" } }); } const css = ` body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } .main-nav { display: flex; justify-content: space-between; margin-bottom: 20px; } .main-nav button { flex-grow: 1; padding: 10px; margin: 0 5px; background-color: #e0e0e0; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .main-nav button.active, .main-nav button:hover { background-color: #4CAF50; color: white; } .weather-dashboard { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .home { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } form { display: flex; margin-bottom: 20px; } select { flex-grow: 1; padding: 10px; margin-right: 10px; } button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } .error { color: red; margin-bottom: 10px; } .weather-info { text-align: center; } `;

marianoeramirez