/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function WeatherDashboard() { const [location, setLocation] = useState({ latitude: 41.9973, longitude: 21.4280 }); // Default to Skopje const [weatherData, setWeatherData] = useState(null); const [cityName, setCityName] = useState("Skopje"); 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,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto` ); const data = await response.json(); setWeatherData(data); } catch (err) { setError("Could not fetch weather data"); } } fetchWeather(); }, [location]); const handleLocationSubmit = async (e) => { e.preventDefault(); try { const response = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json` ); const locationData = await response.json(); if (locationData.results && locationData.results.length > 0) { const firstResult = locationData.results[0]; setLocation({ latitude: firstResult.latitude, longitude: firstResult.longitude }); } else { setError("Location not found"); } } catch (err) { setError("Error finding location"); } }; const getWeatherDescription = (code) => { const weatherCodes = { 0: "Clear sky 🌞", 1: "Mainly clear ☀️", 2: "Partly cloudy 🌤️", 3: "Overcast ☁️", 45: "Foggy 🌫️", 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 ❄️", 77: "Snow grains ❄️", 80: "Slight rain showers 🌦️", 81: "Moderate rain showers 🌦️", 82: "Violent rain showers 🌊", 95: "Thunderstorm ⛈️", 96: "Thunderstorm with light hail 🌩️", 99: "Thunderstorm with heavy hail 🌩️" }; return weatherCodes[code] || "Unknown conditions 🤷‍♀️"; }; if (error) { return

Error: {error}

; } if (!weatherData) { return

; } return (

Weather Dashboard 🌈

{cityName}

{Math.round(weatherData.current_weather.temperature)}°C

{getWeatherDescription(weatherData.current_weather.weathercode)}

Max Temp: {Math.round(weatherData.daily.temperature_2m_max[0])}°C

Min Temp: {Math.round(weatherData.daily.temperature_2m_min[0])}°C

View Val 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", }, }); }

vladocar