;\n\n const { current_weather, daily } = weatherData;\n\n return (\n

Weather Dashboard

\n setSearchInput(e.target.value)}\n placeholder=\"Enter city name\"\n />\n \n \n

Current Weather in {location}

{getWeatherIcon(current_weather.weathercode)}

{current_weather.temperature}°C

Wind Speed: {current_weather.windspeed} km/h

7-Day Forecast

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

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

{getWeatherIcon(daily.weathercode[index])}

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

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

Rain: {daily.precipitation_probability_max[index]}%

\n ))}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\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 = `\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');\n\nbody {\n font-family: 'Roboto', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n min-height: 100vh;\n}\n\n.weather-dashboard {\n max-width: 900px;\n margin: 40px auto;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n}\n\nh1 {\n color: #4a4a4a;\n text-align: center;\n font-size: 2.5em;\n margin-bottom: 30px;\n}\n\nh2 {\n color: #5a5a5a;\n font-size: 1.8em;\n margin-top: 0;\n}\n\nform {\n display: flex;\n justify-content: center;\n margin-bottom: 30px;\n}\n\ninput[type=\"text\"] {\n padding: 12px;\n font-size: 16px;\n border: none;\n border-radius: 25px 0 0 25px;\n width: 70%;\n max-width: 400px;\n outline: none;\n}\n\nbutton {\n padding: 12px 24px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 0 25px 25px 0;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n.current-weather {\n background: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);\n color: white;\n padding: 30px;\n border-radius: 15px;\n text-align: center;\n margin-bottom: 30px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.current-weather h2 {\n color: white;\n margin-bottom: 20px;\n}\n\n.weather-icon {\n font-size: 5em;\n margin: 20px 0;\n}\n\n.temperature {\n font-size: 3em;\n font-weight: bold;\n margin: 10px 0;\n}\n\n.wind {\n font-size: 1.2em;\n}\n\n.forecast {\n background-color: white;\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.forecast-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 20px;\n}\n\n.forecast-day {\n background: linear-gradient(to bottom, #74ebd5 0%, #9face6 100%);\n padding: 15px;\n border-radius: 15px;\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.forecast-day:hover {\n transform: translateY(-5px);\n}\n\n.forecast-day h3 {\n margin-top: 0;\n color: #4a4a4a;\n}\n\n.forecast-day .weather-icon {\n font-size: 2.5em;\n margin: 10px 0;\n}\n\n.forecast-day p {\n margin: 5px 0;\n font-size: 0.9em;\n}\n\n.temp-high {\n color: #ff5252;\n font-weight: bold;\n}\n\n.temp-low {\n color: #4a90e2;\n font-weight: bold;\n}\n\n.precipitation {\n color: #4a4a4a;\n}\n\n.source-link {\n text-align: center;\n margin-top: 30px;\n}\n\n.source-link a {\n color: #4CAF50;\n text-decoration: none;\n font-weight: bold;\n transition: color 0.3s ease;\n}\n\n.source-link a:hover {\n color: #45a049;\n text-decoration: underline;\n}\n\n.loading {\n text-align: center;\n font-size: 2em;\n color: white;\n margin-top: 50px;\n}\n\n.loading span {\n animation: dots 1.5s infinite;\n opacity: 0;\n}\n\n.loading span:nth-child(2) {\n animation-delay: 0.5s;\n}\n\n.loading span:nth-child(3) {\n animation-delay: 1s;\n}\n\n@keyframes dots {\n 0%, 100% { opacity: 0; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .weather-dashboard {\n margin: 20px;\n padding: 20px;\n }\n\n .forecast-grid {\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n }\n\n input[type=\"text\"] {\n width: 60%;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/oioioi/weatherDashboard/code/main.tsx","extension","actionData","errors"]