A modern, responsive weather application that dynamically adapts its UI based on real-time weather conditions. Built with HTML, CSS, and JavaScript, this project focuses on user experience, interactivity, and clean design.
WeatherNow provides real-time weather data with a visually engaging interface that changes based on current conditions. The application emphasizes responsive design, smooth user interactions, and dynamic content rendering using external APIs.
- Background and theme adapt to real-time weather conditions
- Visual themes for sunny, rainy, snowy, cloudy, night, and stormy weather
- Enhances user experience through contextual design
- Real-time temperature (°C)
- Weather condition descriptions
- "Feels like" temperature
- Wind speed, humidity, and pressure
- Location and current date display
- Fully responsive design (mobile, tablet, desktop)
- Clean and modern interface
- Loading states and smooth transitions
- Error handling with user-friendly messages
- Search functionality with keyboard support
- Frontend: HTML5, CSS3, JavaScript (ES6)
- API: OpenWeatherMap API
- Styling: CSS Grid, Flexbox, CSS Animations
- Icons & Fonts: Font Awesome, Google Fonts
weather-app/ ├── index.html ├── style.css ├── script.js ├── README.md └── screenshot.png
To run this project locally:
git clone https://github.com/Annrose-debug/Annrose-debug.git
cd weather-app
open index.html- Integrated third-party API for real-time data handling
- Implemented dynamic UI updates based on external conditions
- Designed responsive layouts for seamless cross-device experience
- Focused on performance, usability, and clean code structure