{location.name} Weather

\n \n

Current Weather

\n {weather.current_weather.temperature}°C\n

\n {weatherIcons[weather.current_weather.weathercode]}\n

\n {weatherDescriptions[weather.current_weather.weathercode]}\n

\n\n

5-Day Forecast

\n {weather.daily.time.slice(0, 5).map((date, index) => (\n

\n {new Date(date).toLocaleDateString('en-US', { weekday: 'short' })}\n

\n {weatherIcons[weather.daily.weathercode[index]]}\n

\n \n {Math.round(weather.daily.temperature_2m_max[index])}°\n \n \n {Math.round(weather.daily.temperature_2m_min[index])}°\n \n

\n ))}\n

\n\n \n View Source\n \n

\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 Weather Dashboard\n \n \n \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 background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.weather-container {\n background-color: white;\n border-radius: 15px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n width: 100%;\n max-width: 500px;\n padding: 20px;\n position: relative;\n}\n\n.search-container {\n margin-bottom: 20px;\n position: relative;\n}\n\n.search-container form {\n display: flex;\n}\n\n.input-wrapper {\n position: relative;\n flex-grow: 1;\n}\n\n.search-container input {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px 0 0 5px;\n}\n\n.suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background-color: white;\n border: 1px solid #ddd;\n border-top: none;\n list-style-type: none;\n margin: 0;\n padding: 0;\n max-height: 200px;\n overflow-y: auto;\n z-index: 10;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.suggestions-dropdown li {\n padding: 10px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.suggestions-dropdown li:hover {\n background-color: #f0f0f0;\n}\n\n.search-container button {\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 0 5px 5px 0;\n cursor: pointer;\n}\n\n.error-message {\n color: red;\n text-align: center;\n margin-bottom: 15px;\n}\n\n.weather-dashboard h1 {\n text-align: center;\n color: #333;\n}\n\n.current-weather {\n text-align: center;\n margin-bottom: 30px;\n}\n\n.current-details {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n}\n\n.temperature {\n font-size: 3rem;\n font-weight: bold;\n color: #007bff;\n}\n\n.weather-icon {\n font-size: 3rem;\n}\n\n.weather-description {\n color: #666;\n}\n\n.forecast {\n text-align: center;\n}\n\n.forecast-grid {\n display: flex;\n justify-content: space-between;\n}\n\n.forecast-day {\n background-color: #f8f9fa;\n border-radius: 10px;\n padding: 15px;\n text-align: center;\n}\n\n.forecast-date {\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.forecast-icon {\n font-size: 2rem;\n margin-bottom: 10px;\n}\n\n.forecast-temps {\n display: flex;\n justify-content: center;\n gap: 10px;\n}\n\n.max-temp {\n color: #dc3545;\n font-weight: bold;\n}\n\n.min-temp {\n color: #007bff;\n opacity: 0.7;\n}\n\n@media (max-width: 600px) {\n .current-details {\n flex-direction: column;\n }\n \n .forecast-grid {\n flex-direction: column;\n gap: 10px;\n }\n}\n`;\n\nconst weatherIcons = {\n 0: \"☀️\", // Clear sky\n 1: \"🌤️\", // Mainly clear\n 2: \"⛅\", // Partly cloudy\n 3: \"☁️\", // Overcast\n 45: \"🌫️\", // Foggy\n 51: \"🌧️\", // Light drizzle\n 61: \"🌧️\", // Light rain\n 63: \"🌧️\", // Moderate rain\n 80: \"🌦️\" // Rain showers\n};\n\nconst weatherDescriptions = {\n 0: \"Clear Sky\",\n 1: \"Mainly Clear\",\n 2: \"Partly Cloudy\", \n 3: \"Overcast\",\n 45: \"Foggy\",\n 51: \"Light Drizzle\",\n 61: \"Light Rain\",\n 63: \"Moderate Rain\",\n 80: \"Rain Showers\"\n};","deleted","label",[98],"permalink","https://www.val.town/x/bhavana/weatherForecastDashboard/code/main.tsx","extension","actionData","errors"]