/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const API_BASE_URL = "https://api.open-meteo.com/v1/forecast"; const weatherIcons = { clear: "☀️", cloudy: "☁️", rainy: "🌧️", snowy: "❄️", stormy: "⛈️", windy: "🌬️", }; function getWeatherIcon(code) { if (code === 0) return weatherIcons.clear; if (code >= 1 && code <= 3) return weatherIcons.cloudy; if (code >= 51 && code <= 67) return weatherIcons.rainy; if (code >= 71 && code <= 77) return weatherIcons.snowy; if (code >= 80 && code <= 99) return weatherIcons.stormy; return weatherIcons.windy; } function WeatherDashboard() { const [weatherData, setWeatherData] = useState(null); const [location, setLocation] = useState("New York"); const [searchInput, setSearchInput] = useState(""); useEffect(() => { fetchWeatherData(location); }, [location]); async function fetchWeatherData(city) { try { const response = await fetch(`${API_BASE_URL}?latitude=40.71&longitude=-74.01&daily=weathercode,temperature_2m_max,temperature_2m_min,precipitation_probability_max¤t_weather=true&timezone=auto&forecast_days=7`); const data = await response.json(); setWeatherData(data); } catch (error) { console.error("Error fetching weather data:", error); } } function handleSearch(e) { e.preventDefault(); setLocation(searchInput); setSearchInput(""); } if (!weatherData) return

; const { current_weather, daily } = weatherData; return (

Weather Dashboard

Current Weather in {location}

{getWeatherIcon(current_weather.weathercode)}

{current_weather.temperature}°C

Wind Speed: {current_weather.windspeed} km/h

7-Day Forecast

{daily.time.map((date, index) => (

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

{getWeatherIcon(daily.weathercode[index])}

Max: {daily.temperature_2m_max[index]}°C

Min: {daily.temperature_2m_min[index]}°C

Rain: {daily.precipitation_probability_max[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 = ` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); body { font-family: 'Roboto', sans-serif; line-height: 1.6; margin: 0; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #333; min-height: 100vh; } .weather-dashboard { max-width: 900px; margin: 40px auto; background-color: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } h1 { color: #4a4a4a; text-align: center; font-size: 2.5em; margin-bottom: 30px; } h2 { color: #5a5a5a; font-size: 1.8em; margin-top: 0; } form { display: flex; justify-content: center; margin-bottom: 30px; } input[type="text"] { padding: 12px; font-size: 16px; border: none; border-radius: 25px 0 0 25px; width: 70%; max-width: 400px; outline: none; } button { padding: 12px 24px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 25px 25px 0; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } .current-weather { background: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); color: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .current-weather h2 { color: white; margin-bottom: 20px; } .weather-icon { font-size: 5em; margin: 20px 0; } .temperature { font-size: 3em; font-weight: bold; margin: 10px 0; } .wind { font-size: 1.2em; } .forecast { background-color: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .forecast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; } .forecast-day { background: linear-gradient(to bottom, #74ebd5 0%, #9face6 100%); padding: 15px; border-radius: 15px; text-align: center; transition: transform 0.3s ease; } .forecast-day:hover { transform: translateY(-5px); } .forecast-day h3 { margin-top: 0; color: #4a4a4a; } .forecast-day .weather-icon { font-size: 2.5em; margin: 10px 0; } .forecast-day p { margin: 5px 0; font-size: 0.9em; } .temp-high { color: #ff5252; font-weight: bold; } .temp-low { color: #4a90e2; font-weight: bold; } .precipitation { color: #4a4a4a; } .source-link { text-align: center; margin-top: 30px; } .source-link a { color: #4CAF50; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .source-link a:hover { color: #45a049; text-decoration: underline; } .loading { text-align: center; font-size: 2em; color: white; margin-top: 50px; } .loading span { animation: dots 1.5s infinite; opacity: 0; } .loading span:nth-child(2) { animation-delay: 0.5s; } .loading span:nth-child(3) { animation-delay: 1s; } @keyframes dots { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @media (max-width: 600px) { .weather-dashboard { margin: 20px; padding: 20px; } .forecast-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } input[type="text"] { width: 60%; } } `;

weatherDashboard

Version 0