A lightweight and user-friendly weather application built with JavaScript that fetches and displays current weather information based on user input or geolocation.

• ✅ Search by city name or use your current location
• 🌡️ Displays temperature, humidity, wind speed, and weather description
• 🖼️ Dynamic weather icons that reflect real-time conditions
• 🚀 Responsive design for desktop and mobile
• 🧩 Easily extendable—add forecasts, background themes, or API sources

• HTML/CSS/JavaScript – Core technologies
• OpenWeatherMap API – For real-time weather data
• [Optional] Bootstrap – For flexible layout & responsiveness
• Structure:

weather-app/
├── index.html        ← Search input & weather display
├── styles.css        ← App styling
├── app.js            ← API calls & UI logic
├── assets/           ← Weather icons or images
└── README.md         ← Documentation

1. Clone the repo

   git clone https://github.com/ManibalaSinha/Wheather-App.git
   cd Wheather-App

2. Get your OpenWeatherMap API key Sign up at openweathermap.org → API keys

3. Configure API key In app.js, update:

   const API_KEY = 'YOUR_API_KEY_HERE';

4. Run locally

   • Open index.html in your browser

   • Or serve it using a simple HTTP server:

     npx live-server

5. Try it out!

   • Enter a city (e.g., "Toronto") and click Search
   • Or use the "Use my location" button

Desktop layout with city search

Mobile-responsive layout

1. User action triggers API fetch from OpenWeatherMap
2. JSON response is parsed to extract key data
3. UI is dynamically updated with temperature, icon, and other details
4. (Optional) Browser geolocation API fetches your current coordinates

• 🔲 Add 5-day weather forecast
• 🔲 Store search history locally (via localStorage)
• 🔲 Improve UI: animations, auto-theme based on weather
• 🔲 Unit tests for API responses & UI rendering
• 🔲 Deploy via GitHub Pages or Netlify

Contributions are welcome—fork the repository to:

1. Add new features (like forecast or themes)
2. Fix bugs or optimize code
3. Improve UI/UX or add mobile-first design

Submit your PR and let's improve the project together!

• Author: Manibala Sinha
• Email: [email protected]
• License: MIT