Weather · With 30 Years of "On This Day" History
中文 | English
A purely front-end static weather website (bilingual Chinese/English), deployable on GitHub Pages, and also suitable for wrapping as an app or WeChat Mini Program. Look up current weather and a 7-day forecast for any city, plus historical data for today's date over the past 30 years for the selected city. Microsoft's MSN Weather used to be ad-free and offered a genuinely useful feature: for any date, it could show the number of precipitation days and the highest or lowest temperatures over the past thirty years. Sadly, those unique features were later retired. So I wanted a weather assistant of my own — one that makes up for the shortcomings of common apps like weather.com.cn and Moji Weather, with the cards I like.
Features
- Chinese/English toggle: one click in the top bar, remembered locally; city names, weather descriptions, level wording, and the air-quality standard all follow the language.
- Auto location: on page load, the site requests the user's location and shows local weather (with browser permission); on denial or failure it falls back to Beijing with a toast. The 📍 button in the top bar re-locates at any time. The last viewed location is remembered and loaded directly on the next visit. City names are reverse-geocoded via BigDataCloud's free client-side API.
- City search: bilingual autocomplete (Open-Meteo Geocoding), defaults to Beijing.
- Common weather cards:
- Current weather hero card (temperature, weather icon, feels-like, description)
- Humidity: 270° gauge arc (needle + color-coded segments)
- Wind: Beaufort level + MSN-style tick compass (speed & direction merged card)
- Pressure / UV / Air Quality: segmented indicator bars
- Air Quality: Chinese uses China's national standard (HJ 633-2012, with primary pollutant); English uses US AQI
- Moon phase: 8 phases + illumination percentage + SVG moon graphic (computed locally)
- Sunrise / Sunset: merged two-column card with a sun-trajectory arc showing the sun's position today
- 7-day forecast (icon, high/low, precipitation chance; card / list modes)
- "On this day" cards for the past 30 years (uses the selected city's local date; statistics for that date over the past 30 years):
- 🌧️ Precipitation days: how many of the past 30 years had precipitation on this date; switches to "snow days" in winter, counting snowfall instead
- 🌧️ Max precipitation: the largest precipitation on this date in 30 years, with year and date
- 🔥 Highest temperature: the highest temperature on this date in 30 years, with year and date
- ❄️ Lowest temperature: the lowest temperature on this date in 30 years, with year and date
Data Sources
All from Open-Meteo (free, open source, no API key, CORS enabled):
| Purpose | Endpoint |
|---|
| City search | geocoding-api.open-meteo.com |
| Current weather + 7-day forecast | api.open-meteo.com/v1/forecast |
| 30-year daily history | archive-api.open-meteo.com/v1/archive |
| Air quality (PM2.5/PM10/O₃/NO₂/SO₂/CO concentrations + US AQI) | air-quality-api.open-meteo.com/v1/air-quality |
Performance & Caching
- The 30-year history is roughly 10,000 daily records; a single full fetch takes about 35 seconds. This site splits the window into 6 five-year chunks fetched concurrently, cutting first load to ~6s; the raw data is then stored in
localStorage and cached for 30 days, making subsequent visits instant.
- Current weather is cached for 10 minutes and air quality for 30 minutes to avoid frequent requests.
- Weather and history are fetched in parallel; total time is the slower of the two (~6s).
- When "today" rolls over to a new day, the frontend recomputes from cached data — no refetch needed.
Running Locally
No build step required — either works:
# Option 1: Python built-in static server
python3 -m http.server 8123
# Open http://localhost:8123 in a browser
# Option 2: Node
npx serve .
You can also double-click index.html to open it via file:// (the APIs allow CORS, so it works fine). Note: browser Geolocation requires a secure context (HTTPS or localhost); most browsers disable it on file://, in which case the site falls back to Beijing.
Notes
- Open-Meteo's free tier allows 10,000 non-commercial calls per day — plenty for personal use.
- Historical archive data may lag by a few days; recent days update as the archive is completed.
- Wind speed is measured at 10m, temperature at 2m, snowfall in cm, per WMO standards.
