\n \n \n \n\n",[],[152,192],"9b39aa26-54b9-4f92-9a0a-45251b59cf86","favicon.svg","019e9818-1d57-7659-9ed7-4f2a9111ec40",["D",1780668177660],"\n",[],[152,200],"effb9daf-1276-4d2e-8f80-67eb47cb5d8b","Counter.tsx","019e9818-1d57-7659-9ed7-46e266293237","019e9818-1d57-7659-9ed7-4a549c0d1685",["D",1780668177660],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[152,214,207],"components","5b2ebe47-1342-4504-acf5-0af06d012db8","App.tsx","019e9818-1d57-7659-9ed7-416109004207",["D",1780674024375],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst DEFAULT_CITY = \"New York\";\n\ntype OpenMeteoPlace = {\n name: string;\n latitude: number;\n longitude: number;\n country?: string;\n admin1?: string;\n};\n\ntype WeatherData = {\n city: string;\n locationLabel: string;\n latitude: number;\n longitude: number;\n temperature: number;\n apparentTemperature: number;\n relativeHumidity: number;\n windSpeed: number;\n precipitation: number;\n cloudCover: number;\n weatherCode: number;\n isDay: boolean;\n description: string;\n updatedAt: string;\n};\n\ntype Status = \"idle\" | \"loading\" | \"ready\" | \"error\";\n\nfunction locationLabel(place: OpenMeteoPlace) {\n return [place.name, place.admin1, place.country].filter(Boolean).join(\", \");\n}\n\nfunction weatherDescription(code: number) {\n if (code === 0) return \"Clear sky\";\n if ([1, 2].includes(code)) return \"Partly cloudy\";\n if (code === 3) return \"Overcast\";\n if ([45, 48].includes(code)) return \"Foggy\";\n if ([51, 53, 55, 56, 57].includes(code)) return \"Drizzle\";\n if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return \"Rain\";\n if ([71, 73, 75, 77, 85, 86].includes(code)) return \"Snow\";\n if ([95, 96, 99].includes(code)) return \"Thunderstorm\";\n return \"Changing conditions\";\n}\n\nasync function fetchWeather(city: string, signal?: AbortSignal): Promise {\n const trimmedCity = city.trim();\n if (!trimmedCity) {\n throw new Error(\"Enter a city name.\");\n }\n\n const geocodeUrl = new URL(\"https://geocoding-api.open-meteo.com/v1/search\");\n geocodeUrl.searchParams.set(\"name\", trimmedCity);\n geocodeUrl.searchParams.set(\"count\", \"1\");\n geocodeUrl.searchParams.set(\"language\", \"en\");\n geocodeUrl.searchParams.set(\"format\", \"json\");\n\n const geocodeResponse = await fetch(geocodeUrl, { signal });\n if (!geocodeResponse.ok) {\n throw new Error(`City lookup failed with HTTP ${geocodeResponse.status}.`);\n }\n\n const geocodeData = await geocodeResponse.json();\n const place = geocodeData.results?.[0] as OpenMeteoPlace | undefined;\n if (!place) {\n throw new Error(`No matching city found for \"${trimmedCity}\".`);\n }\n\n const forecastUrl = new URL(\"https://api.open-meteo.com/v1/forecast\");\n forecastUrl.searchParams.set(\"latitude\", String(place.latitude));\n forecastUrl.searchParams.set(\"longitude\", String(place.longitude));\n forecastUrl.searchParams.set(\n \"current\",\n \"temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,cloud_cover,wind_speed_10m\",\n );\n forecastUrl.searchParams.set(\"temperature_unit\", \"fahrenheit\");\n forecastUrl.searchParams.set(\"wind_speed_unit\", \"mph\");\n forecastUrl.searchParams.set(\"timezone\", \"auto\");\n\n const forecastResponse = await fetch(forecastUrl, { signal });\n if (!forecastResponse.ok) {\n throw new Error(`Weather request failed with HTTP ${forecastResponse.status}.`);\n }\n\n const forecastData = await forecastResponse.json();\n const current = forecastData.current;\n if (!current) {\n throw new Error(\"Open-Meteo did not return current weather data.\");\n }\n\n return {\n city: place.name,\n locationLabel: locationLabel(place),\n latitude: place.latitude,\n longitude: place.longitude,\n temperature: current.temperature_2m,\n apparentTemperature: current.apparent_temperature,\n relativeHumidity: current.relative_humidity_2m,\n windSpeed: current.wind_speed_10m,\n precipitation: current.precipitation,\n cloudCover: current.cloud_cover,\n weatherCode: current.weather_code,\n isDay: Boolean(current.is_day),\n description: weatherDescription(current.weather_code),\n updatedAt: current.time,\n };\n}\n\nfunction ConditionIcon({ code, isDay }: { code: number; isDay: boolean }) {\n const rain = [51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code);\n const snow = [71, 73, 75, 77, 85, 86].includes(code);\n const storm = [95, 96, 99].includes(code);\n const fog = [45, 48].includes(code);\n const cloudy = [1, 2, 3].includes(code) || rain || snow || storm;\n\n return (\n \n );\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n return (\n

\n {label}\n {value}\n

\n );\n}\n\nexport function App() {\n const [city, setCity] = useState(DEFAULT_CITY);\n const [weather, setWeather] = useState(null);\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const controllerRef = useRef(null);\n\n async function loadWeather(nextCity: string) {\n controllerRef.current?.abort();\n const controller = new AbortController();\n controllerRef.current = controller;\n setStatus(\"loading\");\n setError(null);\n\n try {\n const data = await fetchWeather(nextCity, controller.signal);\n setWeather(data);\n setCity(data.city);\n setStatus(\"ready\");\n } catch (err) {\n if ((err as Error).name === \"AbortError\") return;\n setError(err instanceof Error ? err.message : \"Could not load weather.\");\n setStatus(\"error\");\n }\n }\n\n useEffect(() => {\n void loadWeather(DEFAULT_CITY);\n return () => controllerRef.current?.abort();\n }, []);\n\n function onSubmit(event: { preventDefault: () => void }) {\n event.preventDefault();\n void loadWeather(city);\n }\n\n const updatedAt = weather\n ? new Intl.DateTimeFormat(undefined, { dateStyle: \"medium\", timeStyle: \"short\" }).format(new Date(weather.updatedAt))\n : null;\n\n return (\n

\n \n

Live conditions

Compact Weather

\n Source\n

\n\n

{weather?.locationLabel ?? \"Looking up weather\"}

{weather ? `${Math.round(weather.temperature)}°F` : status === \"loading\" ? \"Loading\" : \"Weather\"}

{weather?.description ?? \"Current local conditions from Open-Meteo\"}

\n {weather ? :

}\n

\n\n \n\n {error ?

{error}

: null}\n\n

\n \n \n \n \n

\n\n \n

\n );\n}\n\nexport default App;\n\nconst styles = `\n :root {\n color: #f8fafc;\n background: #0f172a;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n * { box-sizing: border-box; }\n body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #155e75 52%, #164e63 100%); }\n main { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; }\n\n .shell {\n width: min(760px, 100%);\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 8px;\n padding: clamp(20px, 4vw, 34px);\n background: rgba(15, 23, 42, 0.72);\n box-shadow: 0 28px 80px rgba(2, 6, 23, 0.42);\n backdrop-filter: blur(18px);\n }\n\n .topbar, .weather-panel, .search-row, .stats { display: flex; }\n .topbar { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }\n .topbar a { color: #a7f3d0; text-decoration: none; font-weight: 700; }\n .eyebrow { margin: 0 0 6px; color: #67e8f9; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }\n h1, h2, p { margin: 0; }\n h1 { font-size: clamp(2rem, 5vw, 3.9rem); line-height: 0.96; }\n\n .weather-panel { align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }\n .location { color: #bae6fd; font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 700; }\n h2 { margin-top: 8px; font-size: clamp(4.2rem, 12vw, 7.5rem); line-height: 0.88; }\n .condition { margin-top: 14px; color: #d1fae5; font-size: clamp(1.05rem, 2.6vw, 1.4rem); }\n\n .icon-wrap { flex: 0 0 min(36vw, 180px); display: grid; place-items: center; }\n .condition-icon { width: min(36vw, 180px); height: min(36vw, 180px); filter: drop-shadow(0 24px 28px rgba(2, 6, 23, 0.3)); }\n .icon-placeholder { width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }\n\n .search { margin-top: 4px; }\n label { display: block; margin-bottom: 8px; color: #e0f2fe; font-size: 0.88rem; font-weight: 800; }\n .search-row { gap: 10px; align-items: stretch; }\n input, button { min-height: 46px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); font: inherit; }\n input { min-width: 0; flex: 1; padding: 0 14px; color: #f8fafc; background: rgba(15, 23, 42, 0.68); }\n input::placeholder { color: #94a3b8; }\n button { padding: 0 18px; color: #052e16; background: #86efac; border: 0; font-weight: 900; cursor: pointer; }\n button:disabled { cursor: wait; opacity: 0.72; }\n\n .error { margin-top: 12px; color: #fecaca; font-weight: 700; }\n .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }\n .stat { padding: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); }\n .stat span { display: block; color: #bae6fd; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }\n .stat strong { display: block; margin-top: 7px; color: #ffffff; font-size: 1.25rem; }\n\n footer { margin-top: 20px; color: #cbd5e1; font-size: 0.9rem; }\n\n @media (max-width: 620px) {\n main { padding: 18px 12px; place-items: start center; }\n .topbar { align-items: flex-start; }\n .weather-panel { align-items: flex-start; flex-direction: column; }\n .icon-wrap { align-self: center; }\n .search-row { flex-direction: column; }\n button { width: 100%; }\n .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n }\n`;\n",[],[152,214,216],"6507efe3-2e90-44e5-bc5e-5d7c9d9d9ffe",["D",1780668177660],[169,170],[152,214],["D",1780668177660],[168,171,172,173],[152],["D",1780668177660],{"_16":17,"_88":84},{"_16":17,"_82":-5,"_83":84,"_34":35,"_85":86,"_87":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":72,"_73":74,"_75":28,"_76":77,"_78":79,"_80":21,"_81":17},"ctx",{"_59":-5,"_111":267,"_268":269,"_270":271,"_272":26,"_273":26,"_274":26,"_275":39,"_276":-5,"_277":-7,"_278":-7,"_279":43,"_280":26,"_281":26,"_282":-5,"_283":26,"_284":26,"_285":26,"_286":-5},"ENV",{"_238":239,"_240":241,"_242":68,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search