/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function WeatherDashboard() { const [weather, setWeather] = useState(null); const [location, setLocation] = useState({ name: 'New York', latitude: 40.7128, longitude: -74.0060 }); const [locationInput, setLocationInput] = useState(''); const [locationSuggestions, setLocationSuggestions] = useState([]); const [error, setError] = useState(null); const [showSuggestions, setShowSuggestions] = useState(false); const suggestionRef = useRef(null); // Close suggestions when clicking outside useEffect(() => { function handleClickOutside(event) { if (suggestionRef.current && !suggestionRef.current.contains(event.target)) { setShowSuggestions(false); } } document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); async function fetchLocationSuggestions(query) { if (query.length < 2) { setLocationSuggestions([]); return; } try { const response = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(query)}&count=5&language=en&format=json` ); const data = await response.json(); if (data.results && data.results.length > 0) { const suggestions = data.results.map(result => ({ name: result.name, country: result.country, latitude: result.latitude, longitude: result.longitude })); setLocationSuggestions(suggestions); setShowSuggestions(true); } else { setLocationSuggestions([]); setShowSuggestions(false); } } catch (err) { console.error('Failed to fetch location suggestions', err); setLocationSuggestions([]); setShowSuggestions(false); } } const handleInputChange = (e) => { const value = e.target.value; setLocationInput(value); fetchLocationSuggestions(value); }; async function selectLocation(selectedLocation) { setLocationInput(selectedLocation.name); setLocation(selectedLocation); setShowSuggestions(false); await fetchWeatherData(selectedLocation); } async function fetchWeatherData(coords) { try { const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${coords.latitude}&longitude=${coords.longitude}¤t_weather=true&hourly=temperature_2m,precipitation_probability,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto` ); const data = await response.json(); setWeather(data); setError(null); } catch (err) { setError('Failed to fetch weather data'); } } async function handleLocationSubmit(e) { e.preventDefault(); if (locationSuggestions.length > 0) { await selectLocation(locationSuggestions[0]); } } useEffect(() => { fetchWeatherData(location); }, []); return (

{error &&

{error}

} {weather && (

{location.name} Weather

Current Weather

{weather.current_weather.temperature}°C

{weatherIcons[weather.current_weather.weathercode]}

{weatherDescriptions[weather.current_weather.weathercode]}

5-Day Forecast

{weather.daily.time.slice(0, 5).map((date, index) => (

{new Date(date).toLocaleDateString('en-US', { weekday: 'short' })}

{weatherIcons[weather.daily.weathercode[index]]}

{Math.round(weather.daily.temperature_2m_max[index])}° {Math.round(weather.daily.temperature_2m_min[index])}°

))}

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; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .weather-container { background-color: white; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; max-width: 500px; padding: 20px; position: relative; } .search-container { margin-bottom: 20px; position: relative; } .search-container form { display: flex; } .input-wrapper { position: relative; flex-grow: 1; } .search-container input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px 0 0 5px; } .suggestions-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: white; border: 1px solid #ddd; border-top: none; list-style-type: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .suggestions-dropdown li { padding: 10px; cursor: pointer; transition: background-color 0.2s; } .suggestions-dropdown li:hover { background-color: #f0f0f0; } .search-container button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; } .error-message { color: red; text-align: center; margin-bottom: 15px; } .weather-dashboard h1 { text-align: center; color: #333; } .current-weather { text-align: center; margin-bottom: 30px; } .current-details { display: flex; justify-content: center; align-items: center; gap: 20px; } .temperature { font-size: 3rem; font-weight: bold; color: #007bff; } .weather-icon { font-size: 3rem; } .weather-description { color: #666; } .forecast { text-align: center; } .forecast-grid { display: flex; justify-content: space-between; } .forecast-day { background-color: #f8f9fa; border-radius: 10px; padding: 15px; text-align: center; } .forecast-date { font-weight: bold; margin-bottom: 10px; } .forecast-icon { font-size: 2rem; margin-bottom: 10px; } .forecast-temps { display: flex; justify-content: center; gap: 10px; } .max-temp { color: #dc3545; font-weight: bold; } .min-temp { color: #007bff; opacity: 0.7; } @media (max-width: 600px) { .current-details { flex-direction: column; } .forecast-grid { flex-direction: column; gap: 10px; } } `; const weatherIcons = { 0: "☀️", // Clear sky 1: "🌤️", // Mainly clear 2: "⛅", // Partly cloudy 3: "☁️", // Overcast 45: "🌫️", // Foggy 51: "🌧️", // Light drizzle 61: "🌧️", // Light rain 63: "🌧️", // Moderate rain 80: "🌦️" // Rain showers }; const weatherDescriptions = { 0: "Clear Sky", 1: "Mainly Clear", 2: "Partly Cloudy", 3: "Overcast", 45: "Foggy", 51: "Light Drizzle", 61: "Light Rain", 63: "Moderate Rain", 80: "Rain Showers" };

weatherForecastDashboard

Version 3