Weather App

A simple weather application that shows current weather by:

• Your current location (via browser geolocation)
• Any city you search manually

The app uses OpenWeatherMap API data and displays temperature, weather description, wind speed, humidity, cloud coverage, and country flag.

Features

• Your Weather tab for location-based weather
• Search Weather tab for city-based weather lookup
• Loading state while fetching API data
• Error state with retry button
• Session storage for saved coordinates (sessionStorage)
• Basic accessibility improvements (alt text, button labels)

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript (ES6+)
• OpenWeatherMap API
• FlagCDN (country flags)
• Google Fonts (Merriweather Sans)

Folder Structure

Weather-App/
|-- index.html
|-- style.css
|-- index.js
|-- README.md
`-- Images/
    |-- cloud.png
    |-- favicon.ico
    |-- humidity.png
    |-- loading.gif
    |-- location.png
    |-- not-found.png
    |-- search.png
    `-- wind.png

Getting Started

1. Clone or download this project.
2. Open the project folder.
3. Replace API key in index.js:
   • Find const API_KEY = "...";
   • Paste your own OpenWeatherMap API key.
4. Run the app:
   • Open index.html directly in your browser, or
   • Use a local server (recommended), for example VS Code Live Server.

API Key

Get a free API key from OpenWeatherMap:

• https://openweathermap.org/api

Usage

1. Open the app.
2. In Your Weather, click Grant Access to allow location permission.
3. Switch to Search Weather to search weather by city name.
4. If any request fails, use Retry.

Notes

• Temperature is displayed in Celsius (units=metric).
• If geolocation is blocked, location-based weather will not load.
• The app currently uses a client-side API key in index.js.