Everyone talks about it — but no one does anything about it. What? The weather, of course! So, at this year’s Developer Day at AKQA Denmark, we decided to do something about it.
Developers were asked to use AI to create movie-inspired weather widgets. The results were amazing! A Ghostbuster-themed New York forecast; the weather in Rome set in a Gladiator-inspired arena; a futuristic, gloomy Bladerunner L.A. forecast. The exercise was fun for both backend- and frontend developers alike, using Claude Code, Vercel v0 and more.
Afterwards, I decided to recreate the Apple Weather Widgets using a single baseline weather widget web component. Most of the widgets are using other components I’ve created recently (and written about here on dev.to), so there wasn’t that much to code!
Data
Data is coming from WeatherAPI.com. They have a bunch of APIs, all with a generous free tier. For this project, I used the forecast API:
const weatherAPI =
https://api.weatherapi.com/v1/
forecast.json?
key=${env.WEATHER_API_KEY}&
${new URLSearchParams(url.searchParams)};
const weatherResponse =
await fetch(weatherAPI);
Since I also use data from OpenStreetMap (with local country- and city-names), I created a Cloudflare Worker (using the KV store for API keys), filtering the merged data to only return what I need.
For these demos however, in order not to spend my free API calls at WeatherAPI, we use a static JSON file.
Baseline
The baseline component is mostly handling locales and units. In the weather-data we get both celsius, fahrenheit, miles, kilometers etc., so the component is handling lang and locale for us, so the user — depending on these — see the correct values.
Widgets
But let’s take a look at the individual widgets — there are 13 of them! Note, that most of the widgets are using container queries, changing layout depending on their width.
Feels Like
This is one of the simplest widgets. It just shows what the temperature feels like and a short description. It uses a “unit-switcher” — °C | °F — from the baseline component:
Forecast Days
This is the classic forecast widget we know from all other weather widgets. The icons are from cdn.weatherwidgets.com. For the wind direction, I use a simple arrow (svg), and then rotate it based on numbers I get from WeatherAPI:
Forecast Hours
Similar to Forecast Days, this one also use the icons from cdn.weatherwidgets.com and a 24-step hour-by-hour forecast:
Humidity
This one is just as simple as Feels Like:
Moon Phase
This one was easy for me, because I recently made Phases of the Moon in CSS, so it was just a few tweaks and copy/paste:
Precipitation
This one is using my CSS-only charts component, which I wrote about here:
Temperature
Same as the previous one, using column chart:
Pressure
This one is using my CSS Gauges:
Sunphase
This is the only one that actually required coding-from-scratch! I made a dedicated sun-phase component that is imported in the weather widget. It’s a ton of complex SVG-based calculations, check the source code if you want to go down a rabbit-hole:
UV
Next up is UV — should you wear sunscreen or not? It’s an styled as a slider, with the thumb indicating the current UV index:
Visibility
We’re almost there — only a few left! This one is just as simple as Feels Like:
Wind
This one is using a lot of the same techniques as I wrote about in Clocks and Watches in CSS. I made a dedicated nav-compass component, which is imported into the wind widget:
Overview
The final widget, is the one you see on a lot of news-sites and dashboard: The all-in-one city-based overview component:
An even greater overview
I love Apple’s Weather Widgets – and on MacOS you get a complete overview including all the widgets. I had to do that one as well — and it’s here, you can see the power of container queries, as the widgets “morph” themselves depending on screen width.
Container queries allow each widget to respond to its own width rather than the viewport width. This means a widget can be compact when placed in a narrow column, showing just essential data, then automatically expand to reveal charts, graphs, and additional details when given more space. This self-contained responsiveness is what makes the widgets truly reusable across different layouts.
I urge you to open this one in a new window and resize your browser!
So there you have it: 13 weather widgets and an overview widget.
I don’t think I’ve ever written a post with so many Codepen demos!
To make it even easier for you, I’ve gathered all the widgets in a collection at Codepen.
