Weather App

📖 Abstract

Weather App is a dynamic and visually stunning web application that provides real-time weather information for cities worldwide. Built with vanilla JavaScript and powered by OpenWeatherMap API, the app features animated UI elements, dynamic backgrounds that change based on weather conditions, and a glassmorphism design with glowing border effects. This project demonstrates modern CSS animations, API integration, and responsive design principles.

---

🛠️ Tech Stack Layer Technology Frontend HTML5, CSS3, JavaScript (ES6+) API OpenWeatherMap API Fonts Google Fonts (Poppins, Pacifico, Playfair Display) Design Glassmorphism, CSS Animations Hosting Netlify Features Real-time Weather Data, Dynamic Backgrounds

📌 Project Summary Section Details Project Name Weather App Frontend Vanilla JavaScript + CSS3 API Integration OpenWeatherMap API Design Style Glassmorphism with Animations Responsive Mobile & Desktop Friendly Live Demo View Live Purpose Real-time weather information with visual appeal

---

✅ Features

Core Functionality Real-time weather data fetching City-based weather search Temperature in Celsius Humidity percentage display Wind speed information Weather condition detection Error handling for invalid cities

Visual Design Glassmorphism UI design Animated glowing borders Dynamic background changes Weather-specific icons Smooth transitions and animations Responsive card design Custom cursor styling Handwriting-style fonts

User Experience Clean and intuitive interface Instant search results Visual feedback on errors Dynamic placeholder messages Mobile-responsive layout Smooth state transitions Background adapts to weather Professional error messages

---

🎯 Current Outcome

This project currently contains:

• ✔ Fully functional weather search
• ✔ OpenWeatherMap API integration
• ✔ Dynamic background system (5+ weather conditions)
• ✔ Animated glassmorphism card design
• ✔ Error handling and validation
• ✔ Responsive design for all devices
• ✔ Live deployment on Netlify

---

🚀 Quick Start Guide

1️⃣ Clone Repo

git clone https://github.com/SRINIVASBN/Weather-App.git
cd Weather-App

2️⃣ Get API Key

1. Visit OpenWeatherMap
2. Sign up for a free account
3. Generate your API key
4. Replace the API key in script.js:

const apikey = "YOUR_API_KEY_HERE";

3️⃣ Run Locally

# Simply open index.html in your browser
# Or use a local server (recommended)
npx serve
# or
python -m http.server 8000

4️⃣ Access the App

Open http://localhost:8000 in your browser

---

🌤️ Weather Conditions Supported

Condition	Icon	Dynamic Background
Clear	☀️	Bright sunny sky
Clouds	☁️	Cloudy atmosphere
Rain	🌧️	Rainy backdrop
Drizzle	🌦️	Light rain effect
Mist	🌫️	Foggy ambiance

---

🎨 Design Features

Animated Border Effects Top Border: Green animated glow (3s loop) Right Border: Cyan animated glow (3s loop) Bottom Border: Orange animated glow (3s loop) Left Border: Purple animated glow (3s loop)

Card States Before Search: Elevated position, dark gradient After Search: Centered position, semi-transparent Error State: Red-tinted card with glowing animation

Typography Primary Font: Poppins (clean and modern) Input Font: Pacifico (handwriting style) Error Font: Playfair Display (elegant cursive)

---

📁 Project Structure

weather-app/
├── images/
│   ├── clear-b.jpg         # Clear weather background
│   ├── clear.png           # Clear weather icon
│   ├── clouds-b.png        # Clouds background
│   ├── clouds.png          # Clouds icon
│   ├── default-bg.jpg      # Default background
│   ├── drizzle-b.png       # Drizzle background
│   ├── drizzle.png         # Drizzle icon
│   ├── error-b.png         # Error background
│   ├── error.png           # Error icon
│   ├── humidity.png        # Humidity icon
│   ├── mis-b.jpg           # Mist background (alt)
│   ├── mist-b.jpg          # Mist background
│   ├── mist.png            # Mist icon
│   ├── rain-b.jpg          # Rain background
│   ├── rain.png            # Rain icon
│   ├── rb_1320.png         # Additional graphic
│   ├── rb_479.png          # Additional graphic
│   ├── search.png          # Search icon
│   ├── snow-b.jpg          # Snow background
│   ├── snow.png            # Snow icon
│   └── wind.png            # Wind icon
├── index.html              # Main HTML structure
├── script.js               # Weather API logic and interactions
└── style.css               # Complete styling with animations

---

🔗 Live Demo

Check out the live app: Weather App - Live Demo

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

👨‍💻 Author

SRINIVAS BN

---

🔗 Links

• GitHub Repository
• Live Demo

---