" Weather Now is a responsive weather web app that allows users to check real-time weather conditions, forecasts, and more. You can search for any location, use your current geolocation, and view detailed weather insights in a clean and immersive UI."
| Feature | Description |
|---|---|
| 🌡️Real-time Weather | Get up-to-date weather information instantly. |
| 🔍Location Search | Search for weather in any location. |
| 💧Weather metrics | "feels like" temperature, humidity percentage, wind speed, and precipitation amounts. |
| 📍Geolocation | Automatically detect your current location for quick weather updates. |
| 🎤 Voice Search | Search for locations using your voice for convenience. |
| 📅Forecast | Browse a 7-day weather forecast with daily high/low temperatures and weather icons |
| ⚙️ Unit Customization | Toggle between Imperial and Metric measurement units (Celsius/Fahrenheit, km/h & mph, mm for precipitation) |
| 🎨 Immersive UI | Engaging and visually appealing user interface. |
| 🖱️Interactive elements | See hover and focus states for all interactive elements on the page |
| 📱 Responsive Design | Works smoothly on desktops, tablets, and mobile devices. |
- Live Site URL: Weather Now
- Solution URL: Frontend Mentor Solution
- Semantic HTML5 markup
- CSS3 (Flexbox, CSS Grid, custom properties, responsive design)
- JavaScript (Vanilla JS) for dynamic features
- Open-Meteo API for real-time weather data
- OpenStreetMap API for location search and mapping
- Mobile-first workflow
Working on this project helped me strengthen my understanding of:
- Fetching and handling API data (weather + maps)
- Implementing voice search for user convenience
- Designing an immersive and responsive UI
- Handling unit conversions for weather metrics
- Optimizing layout for desktop and mobile
In future updates, I’d like to:
- Add dark/light theme toggle
- Show weather alerts if available
- Improve accessibility (a11y) for screen readers
- Add animations for smoother transitions
- Open-Meteo API – For fetching weather data.
- OpenStreetMap API– For geolocation and search functionality.
- MDN Web Docs – For reference on HTML, CSS, and JS.
- GitHub – Dnyaneshwar
Thanks to Open-Meteo and OpenStreetMap for providing free APIs, and Frontend Mentor for the challenge idea.