🌤️ Weather App

\n \n

\n handleCityChange(e.target.value)}\n onKeyDown={handleKeyDown}\n onBlur={handleInputBlur}\n onFocus={() => city.length >= 2 && setShowSuggestions(true)}\n placeholder=\"Enter city name...\"\n className=\"weather-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-200\"\n disabled={loading}\n autoComplete=\"off\"\n />\n {loadingSuggestions && (\n

\n )}\n \n {showSuggestions && suggestions.length > 0 && (\n

\n {suggestions.map((suggestion, index) => (\n selectSuggestion(suggestion)}\n className={`w-full text-left px-4 py-3 text-gray-800 border-b border-gray-200 border-opacity-30 last:border-b-0 transition-colors ${\n index === selectedSuggestionIndex \n ? 'bg-blue-100 bg-opacity-70' \n : 'hover:bg-blue-100 hover:bg-opacity-50'\n }`}\n >\n

{suggestion.name}

\n {suggestion.admin1 && `${suggestion.admin1}, `}{suggestion.country}\n

\n \n ))}\n

\n )}\n

\n \n {loading ? (\n

\n ) : (\n \"Get Weather\"\n )}\n \n

\n\n {error && (\n

❌ {error}

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

\n {weather.city}, {weather.country}\n

\n {new Date(weather.timestamp).toLocaleString()}\n

\n\n

\n {getWeatherEmoji(weather.description)}\n

{weather.description}

\n \n

\n {unit === \"celsius\" ? weather.temperature.celsius : weather.temperature.fahrenheit}°\n {unit === \"celsius\" ? \"C\" : \"F\"}\n

\n\n

\n setUnit(\"celsius\")}\n className={`px-4 py-2 rounded-lg transition-all ${\n unit === \"celsius\" \n ? \"bg-white bg-opacity-20 text-white\" \n : \"text-gray-300 hover:text-white\"\n }`}\n >\n Celsius\n \n setUnit(\"fahrenheit\")}\n className={`px-4 py-2 rounded-lg transition-all ${\n unit === \"fahrenheit\" \n ? \"bg-white bg-opacity-20 text-white\" \n : \"text-gray-300 hover:text-white\"\n }`}\n >\n Fahrenheit\n \n

\n\n

Humidity

{weather.humidity}%

Wind Speed

{weather.windSpeed} km/h

\n )}\n

\n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();","deleted","label",[171,153],"frontend","permalink","https://www.val.town/x/EveVickem/WeatherAPP/code/frontend/index.tsx","extension","actionData","errors"]