Getting Started

Follow these simple steps to set up and run the Advanced Weather App on your local computer.

1. Download the Source Code

Download the ZIP file from this page and extract it to your preferred folder.

Example:

Weather-App/
│── index.html
│── css/
│── js/
│── assets/
│── README.md

2. Open the Project

Open the project folder using any modern code editor such as:

• Visual Studio Code (Recommended)
• Sublime Text
• WebStorm
• Notepad++

3. Create a Free OpenWeather API Key

This project requires a free API key.

Visit:

https://openweathermap.org/api

Create a free account and generate your API key.

API activation may take 10–30 minutes after creation.

4. Enter Your API Key

There are two ways to use your API key.

Option 1 (Recommended)

Run the application.

A setup banner will appear at the top.

Paste your API key.

Click

Save & Activate Key

The key will be stored securely in your browser's Local Storage.

Option 2

Open

js/api.js

Replace

const API_KEY = "YOUR_API_KEY";

with

const API_KEY = "YOUR_REAL_API_KEY";

5. Run the Project

Simply open

index.html

in your browser.

Or use

• VS Code Live Server
• XAMPP
• Localhost
• Any static web server

6. Allow Location Permission

For Current Location Weather,

allow browser location access.

This enables:

• Current Location Weather
• Automatic City Detection
• Live Weather Updates

7. Internet Connection

The Weather App requires an active internet connection because it fetches live weather data from the API.

Without internet,

Demo/Fallback mode will load automatically.

Features Included

✔ Live Weather

✔ Current Location

✔ City Search

✔ Voice Search

✔ Temperature in °C / °F

✔ 24-Hour Forecast

✔ 7-Day Forecast

✔ AQI

✔ UV Index

✔ Humidity

✔ Pressure

✔ Wind Speed

✔ Wind Direction

✔ Visibility

✔ Sunrise

✔ Sunset

✔ Dynamic Background

✔ Temperature Chart

✔ Interactive Map

✔ Favorite Cities

✔ Search History

✔ Dark Mode

✔ Screenshot Download

✔ Text To Speech

✔ Responsive Design

✔ Local Storage Support

✔ Demo Mode

Browser Compatibility

This project works perfectly on

• Google Chrome
• Microsoft Edge
• Firefox
• Brave
• Opera
• Safari

Latest browser versions are recommended.

Third-Party Libraries Used

• Font Awesome
• Chart.js
• Leaflet.js
• html2canvas
• OpenWeather API

Folder Structure

Weather-App/
│
├── index.html
├── css/
│   ├── style.css
│   ├── responsive.css
│
├── js/
│   ├── api.js
│   ├── app.js
│   ├── forecast.js
│   ├── chart.js
│   ├── storage.js
│
├── assets/
│   ├── icons/
│   ├── images/
│
└── README.md

Customization

You can easily customize:

• Colors
• Fonts
• Weather Icons
• Background Images
• API Provider
• Temperature Units
• Theme
• Cards
• Dashboard Layout
• Charts
• Animations
• Favorite Cities
• Map Provider

Important Notes

• Keep your API key private and never expose it in public repositories.
• Some weather APIs require a few minutes after key generation before they start responding.
• Geolocation works only after the user grants location permission.
• For the best experience, use the latest version of Chrome or Edge.
• This project is intended for educational, portfolio, and personal use. Commercial use should comply with the respective API provider's licensing terms.

Need Help?

If you encounter any issues while setting up the project:

• Verify that your API key is correct and active.
• Check your internet connection.
• Clear your browser cache and Local Storage if needed.
• Ensure JavaScript is enabled in your browser.
• Open the browser's Developer Console (F12) to inspect any API or JavaScript errors.

This guide helps users get the Weather App running quickly while understanding how to configure, customize, and troubleshoot the project.