🌤️ Modern Weather App

A beautiful, responsive weather application built with pure HTML, CSS & JavaScript. It fetches real-time weather data from the OpenWeatherMap API and features a sleek glassmorphism design with animated backgrounds and detailed weather insights.

---

✨ Features

• 🔍 City Search — Search any city worldwide for instant weather data
• 🌡️ Real-Time Temperature — Current, Feels Like, Min & Max temperatures
• 💧 Weather Details — Humidity, Wind Speed, Visibility & more
• 🌅 Sunrise & Sunset — Beautiful timeline with local times
• ☁️ Extra Info — Atmospheric Pressure, Cloud Coverage, Wind Gust
• 🪟 Glassmorphism UI — Modern frosted glass card design
• 🎨 Animated Background — Shifting gradients with floating blur blobs
• 💫 Smooth Animations — Fade-ins, floating icons, loading spinner
• 📱 Fully Responsive — Works perfectly on mobile, tablet & desktop
• ♿ Accessible — ARIA labels and keyboard navigation support

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic structure & layout
CSS3	Styling, animations, glassmorphism, responsive design
JavaScript (ES6+)	API calls (async/await), DOM manipulation, event handling
OpenWeatherMap API	Real-time weather data source
Google Fonts	Poppins font for modern typography
Font Awesome 6	Icons for weather details and UI elements

---

📡 API Data Used

This app utilizes the OpenWeatherMap Current Weather API.

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Safari)
• An API key from OpenWeatherMap (free tier works)

Installation

1. Clone the repository

   git clone https://github.com/your-username/weather-app.git
   cd weather-app

Add your API key Open script.js and replace the API key on line 12: javascript

const API_KEY = 'your_api_key_here'; Open the app Simply open index.html in your browser: bash

Or use a live server extension in VS Code for auto-reload.

---

---

⚙️ Step-by-Step Working

1. 👤 User enters a city name
2. 🔍 Input is validated
   • If empty → shake animation shown
3. 🔄 Loader is displayed
4. 🌐 API call is made using fetch()
5. 📦 Data is received from OpenWeather API

✅ If Success:

• Update UI with:
  • 🌡️ Temperature
  • 💧 Humidity
  • 🌬️ Wind Speed
  • 🌅 Sunrise/Sunset
  • ☁️ Weather Description

❌ If Error:

• Show error message (e.g., City not found)

---

💡 Developer Notes

• Uses async/await for clean API handling
• DOM updates are dynamic and smooth
• Includes error handling + loading states
• UI updates happen only after successful data fetch

---

🚀 Key Learning from This Module

• API Integration using fetch
• Async JavaScript (Promises, async/await)
• DOM Manipulation
• Error Handling
• UI/UX Feedback (loader, animations)

Key JavaScript Concepts Used

• async/await — Clean asynchronous API calls without callback hell
• try/catch — Graceful error handling for network & API failures
• fetch() — Modern browser API for HTTP requests
• encodeURIComponent() — Safe URL encoding for city names with spaces
• DOM Manipulation — getElementById, textContent, classList
• Event Listeners — Click and keyboard (Enter key) support

---

🎨 Design Features

Feature	Implementation
Glassmorphism	backdrop-filter: blur(20px) + semi-transparent background
Animated Gradient	background-size: 400% + @keyframes gradientShift
Floating Blobs	body::before/::after with filter: blur(80px)
Loading Spinner	Pure CSS with border + @keyframes spin
Card Hover Effect	transform: translateY(-4px) + enhanced box-shadow
Icon Animations	Float, pulse, bounce, and heartbeat keyframes
Shake Validation	@keyframes shake triggered via JS classList

---

⚠️ Important Notes

• API Key Security: The API key is exposed in client-side JavaScript. For production apps, use a backend proxy server to keep your key secure.
• Rate Limits: The free tier of OpenWeatherMap allows 60 calls/minute and 1,000,000 calls/month.
• CORS: The OpenWeatherMap API supports CORS, so direct browser requests work fine.

🙏 Credits

• Weather Data: OpenWeatherMap
• Icons: Font Awesome
• Font: Google Fonts - Poppins

---

Built with ❤️ using HTML, CSS & JavaScript