case study
WhatsTheWeather
Search a city and get the current weather from the OpenWeatherMap API
overview
Whats The Weather is a small weather app. You type a city name and it shows the current temperature, the conditions, humidity and wind speed. It calls the OpenWeatherMap current-weather API from plain JavaScript and swaps the weather icon based on the conditions.
problem
I wanted a first project that fetched live data from a third-party API and turned the JSON into a readable UI, including handling a search that doesn't match any city.
approach
- 01Called OpenWeatherMap's current-weather API with fetch, using the city name and metric units.
- 02Matched the API's main condition (Clear, Rain, Snow, Mist/Haze, anything else) to a local icon.
- 03Showed a 'Location Not Found' state when the API returns a 404, and skipped the request if the same city is searched twice in a row.
- 04Added a live date and time clock and a light/dark mode toggle.
features
City search
Returns the temperature in °C, a text description, humidity, wind speed and the resolved city and country.
Condition icons
The weather image changes based on the API's reported conditions.
Not-found state
Unknown locations show a clear error panel instead of a blank card.
Light/dark toggle
A button switches between two background themes.
challenges
Handling API responses
I learned to check the response's cod field before reading nested properties, so an invalid city shows a message instead of throwing an error.
outcome
The app is live on GitHub Pages. It was my introduction to fetch, promises and working with a real REST API's JSON.
stack
contact
Have something worth building?
Open to freelance. Fastest response on WhatsApp ↗ — usually within the hour.