Welcome to Weather App

Select Weather Dashboard from the menu to check current weather conditions.

\n );\n}\n\nfunction WeatherDashboard() {\n const [weather, setWeather] = useState(null);\n const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default NYC\n const [city, setCity] = useState('New York City');\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 const data = await response.json();\n setWeather(data);\n } catch (err) {\n setError('Failed to fetch weather data');\n console.error(err);\n }\n }\n\n fetchWeather();\n }, [location]);\n\n function handleLocationSubmit(e) {\n e.preventDefault();\n // Basic geocoding (very simple, could be improved)\n const cityCoordinates = {\n 'New York City': { latitude: 40.7128, longitude: -74.0060 },\n 'Los Angeles': { latitude: 34.0522, longitude: -118.2437 },\n 'Chicago': { latitude: 41.8781, longitude: -87.6298 },\n 'Houston': { latitude: 29.7604, longitude: -95.3698 },\n 'Phoenix': { latitude: 33.4484, longitude: -112.0740 }\n };\n\n const coords = cityCoordinates[city];\n if (coords) {\n setLocation(coords);\n } else {\n setError('City not found');\n }\n }\n\n return (\n

🌤️ Weather Dashboard

\n \n\n {error &&

{error}

}\n\n {weather && (\n

{city}

🌡️ Temperature: {weather.current_weather.temperature}°C

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

🧭 Wind Direction: {weather.current_weather.winddirection}°

\n )}\n

\n );\n}\n\nfunction App() {\n const [currentPage, setCurrentPage] = useState('home');\n\n return (\n

\n \n\n {currentPage === 'home' && }\n {currentPage === 'weather' && }\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 App\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\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.main-nav {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.main-nav button {\n flex-grow: 1;\n padding: 10px;\n margin: 0 5px;\n background-color: #e0e0e0;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.main-nav button.active, .main-nav button:hover {\n background-color: #4CAF50;\n color: white;\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\n.home {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n text-align: center;\n}\n\nform {\n display: flex;\n margin-bottom: 20px;\n}\n\nselect {\n flex-grow: 1;\n padding: 10px;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px 15px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n}\n\n.error {\n color: red;\n margin-bottom: 10px;\n}\n\n.weather-info {\n text-align: center;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/marianoeramirez/weatherDashboard/code/main.tsx","extension","actionData","errors"]