🌦️ Weather Forecast

\n \n

\n \n \n

\n\n {locationError && (\n

\n {locationError}\n

\n )}\n\n \n\n {weatherData && (\n

Weather in {location.name}

Temperature: {weatherData.current_weather.temperature}°C {getWeatherIcon(weatherData.current_weather.temperature)}

Wind Speed: {weatherData.current_weather.windspeed} km/h 💨

\n\n

Daily Forecast

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

{new Date(date).toLocaleDateString()}

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

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

\n {getWeatherIcon(weatherData.daily.temperature_2m_max[index])}\n

\n ))}\n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Global Weather Forecast\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","createdAt",["D",1739804976177],"version",4,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","Alphydoo","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydDlsU1dnaGxpc01MWklwekg2cGExTGJVTkkifQ","forkedVal","interval","slug","Alphydoo/quaintWhiteBug","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,147,150,154],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1739804976177],{"_117":144,"_141":-5,"_115":145,"_112":146},3,["D",1739804857730],"ecc0061e-ed40-11ef-9198-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":148,"_112":149},["D",1739804808140],"cf30c21e-ed40-11ef-b633-e6cdfca9ef9f",{"_117":151,"_141":-5,"_115":152,"_112":153},1,["D",1739804752663],"ae1f49a6-ed40-11ef-9889-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":155,"_112":156},["D",1739804659795],"76c61dfe-ed40-11ef-930b-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":164,"_165":166,"_94":167},"single","redirect","/v/Alphydoo/quaintWhiteBug/versions",{"_112":146,"_113":168,"_117":144,"_115":169,"_170":99,"_100":101,"_107":108,"_128":129,"_11":96,"_171":-5,"_172":-5,"_173":-5,"_161":26,"_134":135},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nconst CITIES = {\n \"New York\": { latitude: 40.7128, longitude: -74.0060 },\n \"London\": { latitude: 51.5074, longitude: -0.1278 },\n \"Tokyo\": { latitude: 35.6762, longitude: 139.6503 },\n \"Paris\": { latitude: 48.8566, longitude: 2.3522 },\n \"Sydney\": { latitude: -33.8688, longitude: 151.2093 },\n \"Rio de Janeiro\": { latitude: -22.9068, longitude: -43.1729 },\n \"Dubai\": { latitude: 25.2048, longitude: 55.2708 },\n \"Moscow\": { latitude: 55.7558, longitude: 37.6173 },\n \"Cape Town\": { latitude: -33.9249, longitude: 18.4241 },\n \"Mumbai\": { latitude: 19.0760, longitude: 72.8777 },\n \"Abuja\": { latitude: 9.0765, longitude: 7.3986 },\n \"Lagos\": { latitude: 6.5244, longitude: 3.3792 },\n \"Accra\": { latitude: 5.6037, longitude: -0.1870 }\n};\n\nfunction WeatherApp() {\n const [location, setLocation] = useState({ \n latitude: 40.7128, \n longitude: -74.0060,\n name: \"New York\"\n });\n const [weatherData, setWeatherData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [customLocation, setCustomLocation] = useState(\"\");\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n setLoading(true);\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m&daily=temperature_2m_max,temperature_2m_min,sunrise,sunset&timezone=auto`\n );\n const data = await response.json();\n setWeatherData(data);\n setLoading(false);\n } catch (error) {\n console.error(\"Weather fetch error:\", error);\n setLoading(false);\n }\n }\n\n fetchWeather();\n }, [location]);\n\n function handleCityChange(e) {\n const selectedCity = e.target.value;\n if (CITIES[selectedCity]) {\n setLocation({\n ...CITIES[selectedCity],\n name: selectedCity\n });\n }\n }\n\n function handleCustomLocationChange(e) {\n setCustomLocation(e.target.value);\n }\n\n function handleCustomLocationSubmit(e) {\n e.preventDefault();\n const [lat, lon] = customLocation.split(',').map(coord => parseFloat(coord.trim()));\n if (!isNaN(lat) && !isNaN(lon)) {\n setLocation({ \n latitude: lat, \n longitude: lon, \n name: `Custom (${lat}, ${lon})` \n });\n }\n }\n\n function getWeatherIcon(temperature) {\n if (temperature > 30) return \"🔥\";\n if (temperature > 25) return \"☀️\";\n if (temperature > 20) return \"⛅\";\n if (temperature > 10) return \"🌤️\";\n if (temperature > 0) return \"🌥️\";\n return \"❄️\";\n }\n\n if (loading) return

Loading weather data...

;\n\n return (\n

quaintWhiteBug

Version 3