⛅ WeatherScope — Live Weather Dashboard

A clean, real-time weather dashboard built with Vanilla JS, CSS Grid, and the OpenWeatherMap API.

---

🚀 How to Set Up (Step-by-Step)

Step 1 — Get a FREE API Key

1. Go to https://openweathermap.org/appid
2. Create a free account
3. Navigate to API Keys in your profile
4. Copy your key (it looks like: a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4)

⚠️ New API keys can take 10–30 minutes to activate after creation.

---

Step 2 — Add Your API Key

Open app.js and find this line near the top:

const API_KEY = "YOUR_API_KEY_HERE";

Replace YOUR_API_KEY_HERE with your actual key:

const API_KEY = "a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4";

---

Step 3 — Open the Project

Just open index.html in your browser. No server needed!

---

📁 File Structure

weather-dashboard/
│
├── index.html   ← The page structure (HTML)
├── style.css    ← All the visual styling (CSS Grid, dark theme)
├── app.js       ← All the logic (API calls, DOM updates)
└── README.md    ← You're reading this!

---

🧠 What You'll Learn From This Code

Concept	Where to find it
async/await	fetchCurrentWeather() and fetchForecast() in app.js
fetch() API	Same functions above
try/catch/finally	Inside handleSearch()
Promise.all()	Inside handleSearch() — fires 2 calls at once
Dynamic DOM updates	renderCurrentWeather() and renderForecast()
CSS Grid	.stats-grid and .forecast-grid in style.css
CSS Variables	:root block in style.css

---

✨ Features

• 🔴 Live current weather (temperature, humidity, wind, feels like, visibility)
• 📅 5-day forecast with high/low temperatures
• 💨 Wind speed converted from m/s to km/h
• 🌍 Works for any city in the world
• 📱 Responsive — works on mobile too
• ⚠️ Proper error handling for invalid city names

---

🔧 API Endpoints Used

Endpoint	Purpose
GET /weather?q={city}	Current weather
GET /forecast?q={city}	5-day / 3-hour forecast

Full docs: https://openweathermap.org/api

---

💡 Ideas to Extend This Project

• Add a toggle for °C / °F
• Save recent searches in localStorage
• Add hourly chart using Chart.js
• Show a background image based on weather condition
• Auto-detect user's location using navigator.geolocation