Current Weather

Temperature: {current_weather.temperature}°C

Wind Speed: {current_weather.windspeed} km/h

Wind Direction: {current_weather.winddirection}°

\n );\n };\n\n return (\n

HEY I'M FAARAH 🌦️KNOW THE WEATHER

\n \n

\n {error &&

{error}

}\n {weatherData && getCurrentConditions()}\n \n View Source\n \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 \n Weather Dashboard\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n.weather-dashboard {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.location-input input {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.current-conditions {\n background-color: #f9f9f9;\n border-radius: 5px;\n padding: 15px;\n}\n\n.error {\n color: red;\n text-align: center;\n margin-bottom: 15px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 15px;\n color: #666;\n text-decoration: none;\n}\n`;","createdAt",["D",1739789834355],"version",5,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","faarahsaed","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEFKbXNwdFE3NzZYajJIMDJ6VVFEY1B2TG4ifQ","forkedVal","interval","slug","faarahsaed/knowtheweather","description","versions",[140,143,147,151,154,158],{"_118":119,"_141":-5,"_116":142,"_113":111},"prId",["D",1739789834355],{"_118":144,"_141":-5,"_116":145,"_113":146},4,["D",1739789444977],"0a08437c-ed1d-11ef-b81f-e6cdfca9ef9f",{"_118":148,"_141":-5,"_116":149,"_113":150},3,["D",1739789444892],"09fb75ca-ed1d-11ef-b4fc-e6cdfca9ef9f",{"_118":90,"_141":-5,"_116":152,"_113":153},["D",1739789444699],"09ddce3a-ed1d-11ef-b7b5-e6cdfca9ef9f",{"_118":155,"_141":-5,"_116":156,"_113":157},1,["D",1739789444662],"09d7f4ec-ed1d-11ef-ad8c-e6cdfca9ef9f",{"_118":31,"_141":-5,"_116":159,"_113":160},["D",1739789247020],"940a9f76-ed1c-11ef-9e49-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":168,"_169":170,"_94":171},"single","redirect","/v/faarahsaed/knowtheweather/versions",{"_113":160,"_114":172,"_118":31,"_116":173,"_174":99,"_100":101,"_108":109,"_129":130,"_11":96,"_175":-5,"_176":-5,"_177":-5,"_165":26,"_135":136},"/** @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\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default to New York City\n const [weatherData, setWeatherData] = useState(null);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\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,relativehumidity_2m,windspeed_10m`\n );\n \n if (!response.ok) {\n throw new Error('Weather data could not be fetched');\n }\n \n const data = await response.json();\n setWeatherData(data);\n setError(null);\n } catch (err) {\n setError(err.message);\n setWeatherData(null);\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationChange = (e) => {\n const [lat, lon] = e.target.value.split(',').map(coord => parseFloat(coord.trim()));\n if (!isNaN(lat) && !isNaN(lon)) {\n setLocation({ latitude: lat, longitude: lon });\n }\n };\n\n const getCurrentConditions = () => {\n if (!weatherData) return null;\n const { current_weather } = weatherData;\n return (\n

Current Weather

Temperature: {current_weather.temperature}°C

Wind Speed: {current_weather.windspeed} km/h

Wind Direction: {current_weather.winddirection}°

\n );\n };\n\n return (\n

🌦️ Weather Dashboard

\n \n

\n {error &&

{error}

}\n {weatherData && getCurrentConditions()}\n \n View Source\n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n.weather-dashboard {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.location-input input {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.current-conditions {\n background-color: #f9f9f9;\n border-radius: 5px;\n padding: 15px;\n}\n\n.error {\n color: red;\n text-align: center;\n margin-bottom: 15px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 15px;\n color: #666;\n text-decoration: none;\n}\n`;",["D",1739789247020],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

knowtheweather

Version 0