Enhance UI : with Dynamic Backgrounds, Better Alignment & Search Suggestions

[chaurasiya-ayush]

📌 Description

Currently, the UI has the following issues:

• Background mismatch – A static sky photo is used as the background, which does not match well with the header (black background).
• Text visibility – The text "Enter a city name" is black, making it hard to read against the background.
• Poor alignment – The boxes and elements on the page are not aligned properly.
• Static background only – The background remains the same regardless of the weather.
• No search suggestions – The search box does not provide autocomplete/suggestions when typing a city name.

✅ Expected Enhancements

• Use dynamic backgrounds that change based on the weather of the searched city (e.g., sunny, rainy, cloudy, snowy).
• Improve text contrast so that input placeholder text remains visible on all backgrounds.
• Fix alignment of boxes and elements for a cleaner look.
• Implement autocomplete/suggestion feature for city search.

💡 Possible Approach

• Use JavaScript to fetch weather data and dynamically update the background image.
• Add CSS improvements for alignment (Flexbox/Grid).
• Adjust placeholder text color for better visibility.
• Integrate a city suggestion API (e.g., OpenWeatherMap Geocoding API).

📂 GSSoC 2025

This issue is suitable for GSSoC’25 Beginners.

---

📌 Please assign this issue to me. 🙌