Duncan Hann

Back to Projects

Live data · Open-Meteo API

Live weather from an API

Pick a place and this page asks a free weather API for the latest conditions, then turns the answer into icons. Scroll down to see the exact request and the data that came back.

Right now in

Welwyn Garden City

Asking the weather API…

--°C

Loading the latest weather

Feels like
--
Wind
--
Humidity
--

Next five days

  1.   
  2.   
  3.   
  4.   
  5.   

Behind the scenes

One request, one response

Everything above came from a single request to Open-Meteo (opens in a new tab), a free weather API. These are the real request and response from this page, and they change when you pick another place.

  1. The request

    The page builds a web address. Everything after the ? is the question, one detail per line, joined by &.

    1. https://api.open-meteo.com/v1/forecast

  2. The response

    The API answers with JSON: plain text laid out as labels and values, easy for code to read.

    Waiting for an answer…

    { }

  3. The page

    The API doesn't send pictures, just a weather code. The page looks the code up in a table and picks the words and the icon.

    "weather_code": ?

    …

    How does the JSON become this page? From JSON to a web page

The icon set

Twelve icons for every kind of sky

The weather API uses 28 weather codes. I drew twelve icons and matched each code to one. Hover over one to see it move.

  • Sunny Codes 0, 1
  • Clear night Codes 0, 1
  • Partly cloudy Code 2
  • Partly cloudy, night Code 2
  • Cloudy Code 3
  • Fog Codes 45, 48
  • Drizzle Codes 51, 53, 55
  • Rain Codes 61, 63, 65, 80, 81, 82
  • Sunny showers Codes 80, 81
  • Sleet Codes 56, 57, 66, 67
  • Snow Codes 71, 73, 75, 77, 85, 86
  • Thunder Codes 95, 96, 99