A modern weather intelligence application built using HTML5, CSS3, JavaScript (ES6+), OpenWeatherMap API, and Local Storage.
Weather Tracker provides real-time weather information, location-based forecasts, persistent search history, offline awareness, and a modern glassmorphism interface designed to deliver a smooth and responsive user experience.
https://divyaprasoon-weather-tracker.vercel.app/
https://github.com/prasoon-develop/weather-tracker
Weather Tracker is a real-time weather monitoring web application that allows users to search weather conditions for cities worldwide or automatically retrieve weather information based on their current location.
The application integrates external APIs, browser geolocation services, local storage persistence, and performance optimization techniques to provide a reliable and user-friendly experience.
Designed with a modern dashboard-style interface and glassmorphism effects, the project focuses on both functionality and visual appeal while maintaining clean code practices and responsive design principles.
- City-Based Weather Search
- Current Temperature Display
- Weather Condition Description
- Humidity Monitoring
- Dynamic Weather Icons
- Real-Time Data Retrieval
- Automatic Location Detection
- Browser Geolocation API Integration
- Instant Local Weather Updates
- User Permission Handling
- Persistent Search History
- Local Storage Integration
- Quick Access to Recent Searches
- Improved User Convenience
- Debounced Search Requests
- Reduced API Calls
- Efficient Data Fetching
- Improved Application Responsiveness
- Online Status Detection
- Offline Status Detection
- Real-Time Network Monitoring
- User Notification Banner
- Glassmorphism Design
- Dashboard-Inspired Layout
- Modern Card Components
- Responsive Design
- Mobile-Friendly Experience
- CSS Animations
weather-tracker/
│
├── index.html
├── style.css
├── script.js
└── assets/
└── weather-tracker-preview.png| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, JavaScript (ES6+) |
| API Integration | OpenWeatherMap API |
| Browser APIs | Geolocation API, Local Storage API, Network Status API |
| Networking | Fetch API |
| Deployment | GitHub, Vercel |
Integrated the OpenWeatherMap API to fetch accurate and real-time weather information for cities across the globe.
Implemented browser geolocation functionality to automatically detect user location and retrieve corresponding weather data.
Stored search history using Local Storage to improve usability and provide quick access to previously searched locations.
Implemented Debouncing techniques to prevent excessive API requests and improve application efficiency during user input.
Utilized the Browser Network Status API to detect connectivity changes and notify users when the application goes offline.
Built a dynamic weather visualization interface using DOM manipulation techniques, enabling instant updates without page reloads.
Applied responsive design principles, CSS animations, glassmorphism effects, and interactive UI rendering to create a polished user experience.
User Search / Geolocation
│
▼
Weather Request
│
▼
Debounced API Call
│
▼
OpenWeatherMap API
│
▼
Weather Data Processing
│
▼
Dynamic UI Rendering
│
▼
Local Storage Update
This project demonstrates practical experience with:
- REST API Integration
- Fetch API
- Asynchronous JavaScript
- Async/Await
- Browser Geolocation API
- Local Storage
- Network Status API
- Event Handling
- DOM Manipulation
- Debouncing Techniques
- Responsive Web Design
- CSS Animations
- Error Handling
Project Type: Portfolio Project
Development Period: October 2025 – November 2025
- Project Architecture Design
- OpenWeatherMap API Integration
- Dynamic Weather Retrieval
- Search History Persistence
- Glassmorphism UI Design
- Responsive Layout Improvements
- Debouncing Implementation
- Offline Detection System
- Performance Optimization
- Enhanced User Experience
Planned improvements include:
- 7-Day Weather Forecast Support
- Air Quality Index Tracking
- Progressive Web App (PWA) Support
- Multiple City Comparison Dashboard
- Weather Alerts & Notifications
- Advanced Climate Insights
Divya Prasoon
B.E. Computer Science Engineering (Data Science)
Chandigarh University
✔ Real-Time Weather Monitoring
✔ OpenWeatherMap API Integration
✔ Browser Geolocation Support
✔ Local Storage Persistence
✔ Debounced Search Optimization
✔ Offline Detection System
✔ Dynamic UI Rendering
✔ Glassmorphism User Interface
✔ Responsive Design
✔ Modern Frontend Engineering
✔ Portfolio-Ready Project