
A web-based weather application developed with vanilla JS, featuring real-time weather and a 5-day forecast using the OpenWeatherMap API, with a dynamic background.
Category
Frontend
Status
Completed
GitHub Stats
Created
Apr 10, 2023
Last Updated
Jan 18, 2026
In this project, I have developed a browser-based weather interface that displays real-time weather and a 5-day forecast using OpenWeatherMap data. The interface is built with vanilla JavaScript; features like geolocation, recent searches, and a dynamic background all operate directly on the client-side. :contentReference[oaicite:0]{index=0}
Most basic weather applications often only display the temperature and have a weak user flow. In this project, I focused on solving the need to consolidate search functionality, using current location, additional weather metrics, and short-term forecasts into a single screen. :contentReference[oaicite:1]{index=1}
I make OpenWeatherMap API calls based on city name or coordinates and display information such as temperature, feels-like temperature, wind, humidity, pressure, and visibility. I change the background gradient according to the weather, generate icons with Lucide, and animate transitions with GSAP. I've also stored recently searched cities in localStorage to make them accessible again. :contentReference[oaicite:2]{index=2}
The outcome is a visually more organized and interactive weather application that can be opened directly in the browser without any installation required. While the project is small-scale, it clearly demonstrates API integration, browser features, and interface state management within a single file structure. :contentReference[oaicite:3]{index=3}
HTML5, CSS3, JavaScript, OpenWeatherMap API, GSAP, Lucide Icons, localStorage, Geolocation API