/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [weather, setWeather] = useState(null); useEffect(() => { fetch('/weather') .then(response => response.json()) .then(data => setWeather(data)) .catch(error => console.error('Error fetching weather:', error)); }, []); if (!weather) return

Loading weather data...

; return (

Weather in Fort Collins, CO 80528

Current Temperature: {weather.temperature}°F

High: {weather.highTemperature}°F

Low: {weather.lowTemperature}°F

Condition: {weather.weatherCode}

View source: {import.meta.url.replace("esm.town", "val.town")}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.url.endsWith('/weather')) { const weatherData = await fetchWeather(); return new Response(JSON.stringify(weatherData), { headers: { 'Content-Type': 'application/json' }, }); } return new Response(` Fort Collins Weather

`, { headers: { "content-type": "text/html", }, }); } function celsiusToFahrenheit(celsius: number): number { return Math.round((celsius * 9/5) + 32); } async function fetchWeather() { const response = await fetch( 'https://api.open-meteo.com/v1/forecast?latitude=40.5853&longitude=-105.0844¤t_weather=true&daily=temperature_2m_max,temperature_2m_min&timezone=America%2FDenver' ); const data = await response.json(); return { temperature: celsiusToFahrenheit(data.current_weather.temperature), highTemperature: celsiusToFahrenheit(data.daily.temperature_2m_max[0]), lowTemperature: celsiusToFahrenheit(data.daily.temperature_2m_min[0]), weatherCode: getWeatherCondition(data.current_weather.weathercode), }; } function getWeatherCondition(code: number): string { const conditions: { [key: number]: string } = { 0: 'Clear sky', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast', 45: 'Fog', 48: 'Depositing rime fog', 51: 'Light drizzle', 53: 'Moderate drizzle', 55: 'Dense drizzle', 61: 'Slight rain', 63: 'Moderate rain', 65: 'Heavy rain', 71: 'Slight snow fall', 73: 'Moderate snow fall', 75: 'Heavy snow fall', 95: 'Thunderstorm', }; return conditions[code] || 'Unknown'; } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f8ff; } .weather-container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; } h1 { color: #333; } p { color: #666; margin: 10px 0; } `;

rohernan76