Weather Dashboard

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function getWeatherIcon(code) { const weatherIcons = { 0: "☀️", 1: "🌤️", 2: "⛅", 3: "☁️", 45: "🌫️", 48: "🌫️", 51: "🌧️", 53: "🌧️", 55: "🌧️", 61: "🌧️", 63: "🌧️", 65: "🌧️", 71: "❄️", 73: "❄️", 75: "❄️", 80: "🌦️", 81: "🌦️", 82: "🌊", 95: "⛈️", 96: "🌩️", 99: "🌩️" }; return weatherIcons[code] || "❓"; } 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&forecast_days=3` ); const data = await response.json(); setWeatherData(data); } catch (err) { setError("Could not fetch weather data"); console.error(err); } } 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"); console.error(err); } }; 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"; }; const formatDate = (dateString) => { const date = new Date(dateString); return date.toLocaleDateString('en-US', { weekday: 'short' }); }; if (error) { return (

Error: {error}

); } if (!weatherData) { return (

🌀

Loading weather data...

); } const currentTemp = Math.round(weatherData.current_weather.temperature); const maxTemp = Math.round(weatherData.daily.temperature_2m_max[0]); const minTemp = Math.round(weatherData.daily.temperature_2m_min[0]); const weatherCode = weatherData.current_weather.weathercode; const weatherIcon = getWeatherIcon(weatherCode); const weatherDescription = getWeatherDescription(weatherCode); return (

{cityName}

{weatherIcon}

{currentTemp}°

{weatherDescription}

Max {maxTemp}°C

Min {minTemp}°C

{weatherData.daily.time.slice(1, 4).map((date, index) => (

{formatDate(date)}

{getWeatherIcon(weatherData.daily.weathercode[index + 1])}

{Math.round(weatherData.daily.temperature_2m_max[index + 1])}° {Math.round(weatherData.daily.temperature_2m_min[index + 1])}°

))}

View Val Source

); } const styles = { container: { fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif", display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', margin: 0, padding: 0, }, card: { backgroundColor: 'rgba(255,255,255,0.9)', borderRadius: '20px', boxShadow: '0 10px 25px rgba(0,0,0,0.1)', padding: '30px', width: '350px', textAlign: 'center', transition: 'all 0.3s ease', }, searchForm: { display: 'flex', marginBottom: '20px', }, searchInput: { flex: 1, padding: '10px', borderRadius: '10px 0 0 10px', border: '1px solid #ddd', fontSize: '16px', }, searchButton: { padding: '10px 15px', borderRadius: '0 10px 10px 0', border: '1px solid #ddd', backgroundColor: '#f0f0f0', cursor: 'pointer', }, weatherHeader: { marginBottom: '20px', }, cityName: { fontSize: '24px', color: '#333', margin: 0, }, weatherMain: { display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '20px', }, weatherIcon: { fontSize: '80px', marginRight: '20px', }, temperatureContainer: { textAlign: 'left', }, currentTemp: { fontSize: '48px', fontWeight: 'bold', color: '#333', }, weatherDescription: { fontSize: '18px', color: '#666', }, weatherDetails: { display: 'flex', justifyContent: 'space-around', backgroundColor: '#f4f4f4', borderRadius: '10px', padding: '15px', marginBottom: '20px', }, detailItem: { display: 'flex', flexDirection: 'column', alignItems: 'center', }, forecastContainer: { display: 'flex', justifyContent: 'space-between', backgroundColor: '#f4f4f4', borderRadius: '10px', padding: '15px', marginBottom: '20px', }, forecastDay: { display: 'flex', flexDirection: 'column', alignItems: 'center', }, forecastDayName: { fontSize: '14px', color: '#666', marginBottom: '5px', }, forecastIcon: { fontSize: '30px', marginBottom: '5px', }, forecastTemps: { display: 'flex', flexDirection: 'column', }, forecastTempMax: { color: '#333', fontWeight: 'bold', marginBottom: '3px', }, forecastTempMin: { color: '#666', fontSize: '14px', }, sourceLink: { display: 'block', color: '#666', textDecoration: 'none', fontSize: '14px', }, errorContainer: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundColor: '#f8d7da', color: '#721c24', textAlign: 'center', }, loadingContainer: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundColor: '#f0f0f0', }, spinner: { fontSize: '50px', animation: 'spin 2s linear infinite', } }; 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", }, }); }

weatherDashboard

Version 4