A minimal and interactive weather interface built using HTML, CSS, and JavaScript. This project focuses on dynamic UI updates, smooth visual transitions, and clean component-based design without external libraries.
👉 https://jbmsacps-stack.github.io/Weather-UI-Web-App/
- Dynamic weather states: Sunny, Rainy, Cloudy, Stormy
- Smooth background and glow transitions
- Interactive UI updates via JavaScript
- Subtle hover-based icon animation
- Centered card-based layout
- Consistent typography and spacing
- DOM manipulation (
textContent,querySelector) - Event handling (
addEventListener) - State-driven UI using structured data
- CSS Flexbox layout system
- CSS transitions and hover effects
- Theming via dynamic style updates
Clicking the “Change Weather” button dynamically updates:
- Temperature
- Weather icon
- Condition text
- Background theme
- Glow and color scheme
Each state is designed with its own visual identity.
- HTML5
- CSS3
- JavaScript (Vanilla)
- Uses static data (no real-time weather API)
- Intended for UI and frontend practice
- Not optimized for production environments
- Integrate real-time weather API
- Add city search functionality
- Improve responsiveness for different screen sizes
- Introduce advanced animations and transitions
- Implement dark/light mode toggle
JB
This project was developed as part of frontend practice to strengthen understanding of layout design, styling techniques, and dynamic UI behavior using JavaScript.