🌦 Weather Application
A responsive and user-friendly Weather Application built using HTML, CSS, and JavaScript that provides real-time weather information, 5-day forecast, current location weather, and dark/light mode using public APIs.
🚀 Features
🔍 Search weather by city name
📍 Get current location weather using browser geolocation
🌡 View current temperature, wind speed, and conditions
🌤 Weather icons based on real-time conditions
🌙 Dark / Light mode toggle with theme persistence
⚡ Fast and lightweight (no API key required)
🛠 Tech Stack
HTML5 – Structure
CSS3 – Styling & responsive layout
JavaScript (ES6) – Logic & API handling
Open-Meteo API – Weather & forecast data
Geolocation API – Current location detection
📂 Project Structure weather-app/ │ ├── index.html ├── style.css ├── script.js └── README.md
📸 Screenshots
(Optional: Add screenshots here later)
Example:
/screenshots/home.png /screenshots/dark-mode.png /screenshots/forecast.png
⚙️ How It Works
User enters a city name or clicks Use My Location
App converts city → latitude & longitude (Geocoding API)
Weather data is fetched using Open-Meteo API
UI updates dynamically with:
Current weather
Weather icons
Theme preference is saved using localStorage
Download or clone the repository
Open index.html in your browser
Option 2: Live Server (Recommended)
Open project in VS Code
Install Live Server extension
Right-click index.html → Open with Live Server
🌍 API Used
Open-Meteo Weather API
Free & open-source
No API key required
Provides current weather and forecast data
💡 Future Enhancements
⏳ Loading animation
📱 Mobile-first UI improvements
🎞 Animated weather icons
🧭 Air quality index
📊 Hourly forecast
🧠 What I Learned
Working with public REST APIs
Handling asynchronous JavaScript (Fetch API)
DOM manipulation and dynamic UI updates
Implementing dark/light mode
Using browser geolocation
Error handling and debugging
👤 Author
Darshan R
LinkedIn: (https://www.linkedin.com/in/darshanr29/)
⭐ Acknowledgements
Open-Meteo API
Public APIs GitHub Repository