← Back to Interactive Lab

Weather App

Vanilla JavaScript application that retrieves and presents current weather by city or US ZIP code using the OpenWeather API.

HTML · CSS · JavaScript · OpenWeather API · Firebase Hosting

Weather App desktop view showing San Francisco at 58 degrees Fahrenheit with scattered clouds, 80 percent humidity, and 14 mile-per-hour wind.
Current weather for San Francisco in the desktop interface.
Weather App mobile layout showing San Francisco at 58 degrees Fahrenheit with scattered clouds, humidity, and wind details.
The same current-weather result adapted to a narrow mobile viewport.
Load interactive demo

What this demonstrates

Vanilla JavaScript, Fetch API integration, form interaction, async loading and error states, DOM rendering, response-driven imagery, responsive CSS, and accessible status feedback.

Why it matters

A compact example of connecting a focused browser interface to live external data while keeping interaction, failure handling, and responsive presentation clear.

Search by city or five-digit US ZIP code to retrieve current temperature, conditions, humidity, and wind data from OpenWeather. The interface includes loading and invalid-location feedback, accessible form and status behavior, condition-driven imagery, and responsive layouts for desktop and mobile.

View live app