WeatherPro - Live Weather Forecast Application

A professional, production-ready weather forecasting web application with modern UI, PWA support, and comprehensive weather data.

Features

Core Weather

Current weather conditions with detailed metrics
24-hour hourly forecast
7-day daily forecast
Air Quality Index (AQI) with pollutant info
UV Index with safety recommendations
Sunrise, sunset, and day length
Weather alerts and warnings
Cloud coverage, visibility, dew point

Interactive Features

Location auto-detection via Geolocation API
City search with autocomplete suggestions
Temperature unit toggle (°C / °F)
Dark/Light theme with persistence
Favorite cities with Local Storage
Search history
Share weather report
Refresh weather data

Advanced Features

Interactive weather charts (Temperature, Humidity, Rain)
Weather map with multiple layers (Clouds, Rain, Temp, Wind)
AQI gauge visualization
Animated weather icons
Weather-based dynamic backgrounds
Real-time clock

Smart Features

Farmer Support: Rain prediction, crop advisory, drought/flood warnings
Travel Support: Travel recommendations, best time to visit, activity suggestions
Health Support: UV warnings, air pollution alerts, heat stroke risk, allergy risk

PWA Features

Offline support with Service Worker
Installable as standalone app
App manifest for home screen
Push notification support
Background sync

Performance

Lazy loading images
API response caching
Debounced search
Optimized animations
Responsive images

Tech Stack

HTML5 - Semantic markup with accessibility
CSS3 - Glassmorphism design, CSS custom properties, animations
Vanilla JavaScript (ES6+) - No framework dependencies
OpenWeatherMap API - Weather, forecast, air quality, UV data
PWA - Service Worker, Manifest, Offline support

Prerequisites

A web browser (Chrome, Firefox, Safari, Edge)
OpenWeatherMap API Key (free tier available)

Installation

1. Clone or Download

git clone https://github.com/yourusername/weatherpro.git
cd weatherpro

Or download and extract the ZIP file.

2. Get an API Key

Sign up at https://openweathermap.org/api
Go to "API Keys" section in your account
Copy your API key
The free tier includes:
- Current Weather API
- 5-day/3-hour Forecast API
- Air Pollution API
- Geocoding API

3. Configure API Key

Open js/app.js and replace the placeholder API key:

const CONFIG = {
  API_KEY: 'YOUR_ACTUAL_API_KEY_HERE', // Replace with your key
  // ... rest of config
};

4. Run Locally

Since the app uses ES6+ modules and Service Workers, serve it through a local web server:

Option A: Using VS Code Live Server

Install "Live Server" extension
Right-click index.html → "Open with Live Server"

Option B: Using Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Option C: Using Node.js

npx serve .

Option D: Using PHP

php -S localhost:8000

Then open http://localhost:8000 in your browser.

Deployment

Option 1: GitHub Pages

Create a GitHub repository
Push the project
Go to Settings → Pages
Select main branch and / (root) folder
Your app will be live at https://yourusername.github.io/repo-name

Option 2: Netlify

Create a Netlify account
Connect your Git repository
Deploy settings:
- Build command: (none needed)
- Publish directory: .
Deploy!

Option 3: Vercel

Install Vercel CLI: npm i -g vercel
Run vercel in project directory
Follow the prompts

Option 4: Traditional Hosting

Upload all files to your web host's public directory via FTP.

API Integration Guide

OpenWeatherMap APIs Used

API	Endpoint	Usage
Current Weather	`/data/2.5/weather`	Real-time weather data
5-Day Forecast	`/data/2.5/forecast`	Hourly/daily forecasts
Air Pollution	`/data/2.5/air_pollution`	AQI and pollutants
UV Index	`/data/2.5/uvi`	UV radiation levels
Geocoding	`/geo/1.0/direct`	City search
Reverse Geocoding	`/geo/1.0/reverse`	Location name from coords
Weather Maps	`/img/wn/{icon}@2x.png`	Weather icons

API Rate Limits (Free Plan)

60 requests per minute
1,000,000 requests per month
Cached for 10 minutes to optimize usage

API Response Caching

The app implements intelligent caching:

Weather data cached for 10 minutes
Cache stored in memory during session
Service Worker caches API responses for offline
Background refresh updates cache

Project Structure

weather-app/
├── index.html          # Main HTML file (semantic, SEO optimized)
├── manifest.json       # PWA manifest
├── sw.js              # Service Worker (offline support)
├── robots.txt         # Search engine config
├── README.md          # This file
│
├── css/
│   └── style.css      # Complete stylesheet (glassmorphism, responsive)
│
├── js/
│   └── app.js         # Main application (all logic)
│
└── assets/
    └── icons/         # PWA app icons
        ├── icon-16x16.png
        ├── icon-32x32.png
        ├── icon-72x72.png
        ├── icon-96x96.png
        ├── icon-128x128.png
        ├── icon-144x144.png
        ├── icon-152x152.png
        ├── icon-192x192.png
        ├── icon-384x384.png
        └── icon-512x512.png

Configuration

App Configuration (`js/app.js`)

const CONFIG = {
  API_KEY: 'YOUR_API_KEY',
  CACHE_DURATION: 10 * 60 * 1000,  // Cache time (10 min)
  DEFAULT_LAT: 51.5074,             // Default: London
  DEFAULT_LON: -0.1278,
  DEFAULT_CITY: 'London',
  DEFAULT_COUNTRY: 'GB'
};

Theme

Theme preference saved in localStorage (weatherTheme)
Default: dark mode
Toggle via header button or T key

Units

Unit preference saved in localStorage (weatherUnit)
Default: metric (°C, m/s)
Toggle via U key

PWA Setup

The app is PWA-ready. When deployed to HTTPS:

Service Worker auto-registers on page load
"Install App" button appears in sidebar
App can be installed on mobile/desktop
Offline page shows cached data
Background sync updates cache

Testing PWA Locally

Use Chrome DevTools:

Open Application tab
Check "Offline" in Service Workers
Reload - app should show cached data

Keyboard Shortcuts

Key	Action
`Ctrl/Cmd + K`	Focus search bar
`U`	Toggle °C/°F
`Escape`	Close sidebar / suggestions

Browser Support

Chrome 60+
Firefox 60+
Safari 14+
Edge 79+
Opera 47+
Samsung Internet 8+

Accessibility

Semantic HTML5 elements
ARIA labels and roles
Keyboard navigation
Focus indicators
Screen reader friendly
Motion reduction support
High contrast support

SEO

Meta tags (description, keywords, author)
Open Graph tags (Facebook, LinkedIn)
Twitter Card tags
Structured data (JSON-LD)
Semantic HTML
Robots.txt

Performance Optimization

CSS animations use transform and opacity only
Debounced search input
Lazy loaded images
API response caching
Minimal DOM manipulation
Efficient canvas rendering
Debounced resize handler

License

MIT License - Free for personal and commercial use.

Support

For issues, feature requests, or contributions:

GitHub Issues: https://github.com/yourusername/weatherpro/issues
API Support: OpenWeatherMap

Built with ❤️ using OpenWeatherMap API

Name		Name	Last commit message	Last commit date
assets/icons		assets/icons
css		css
js		js
README.md		README.md
index.html		index.html
manifest.json		manifest.json
robots.txt		robots.txt
sw.js		sw.js

Latest commit

History

Folders and files

Repository files navigation