/** @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"; const weatherCodeMap = { 0: { description: "Clear sky", icon: "☀️" }, 1: { description: "Mainly clear", icon: "🌤️" }, 2: { description: "Partly cloudy", icon: "⛅" }, 3: { description: "Overcast", icon: "☁️" }, 45: { description: "Foggy", icon: "🌫️" }, 51: { description: "Light drizzle", icon: "🌧️" }, 61: { description: "Slight rain", icon: "🌧️" }, 63: { description: "Moderate rain", icon: "🌧️" }, 80: { description: "Rain showers", icon: "🌦️" } }; function HourlyWeather({ hourlyData }) { return (

{hourlyData.time.map((time, index) => { const hour = new Date(time).getHours(); const temperature = hourlyData.temperature_2m[index]; const weatherCode = hourlyData.weathercode[index]; const weatherInfo = weatherCodeMap[weatherCode] || { description: "Unknown", icon: "❓" }; return (

{hour}:00

{weatherInfo.icon}

{temperature}°C

); })}

); } function WeatherApp() { const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchWeather() { try { const response = await fetch( "https://api.open-meteo.com/v1/forecast?latitude=1.3521&longitude=103.8198&hourly=temperature_2m,weathercode¤t_weather=true&temperature_unit=celsius&windspeed_unit=kmh&precipitation_unit=mm&timezone=Asia%2FSingapore&forecast_days=1" ); const data = await response.json(); setWeatherData(data); setLoading(false); } catch (error) { console.error("Weather fetch failed", error); setLoading(false); } } fetchWeather(); }, []); if (loading) return

; if (!weatherData) return

No data

; const { current_weather: currentWeather, hourly } = weatherData; const currentWeatherInfo = weatherCodeMap[currentWeather.weathercode] || { description: "Unknown", icon: "❓" }; return (

Singapore Weather

🌴

{currentWeatherInfo.icon}

{currentWeatherInfo.description}

{currentWeather.temperature}°C

Wind: {currentWeather.windspeed} km/h

Hourly Forecast

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(` Singapore Weather

`, { headers: { "content-type": "text/html" } }); }

gao