Weather Forecast — 5-Day Forecast Card HTML CSS JS

A weather forecast card shows the current conditions prominently and a multi-day outlook beneath — the layout of every weather app and dashboard widget. This snippet builds it in plain HTML, CSS, and vanilla JavaScript: a current-conditions header with temperature and details, plus a 5-day row of glassy day tiles with high/low temps, driven by a clean weather-code-to-icon mapping — no library.

A code-to-icon mapping, not hardcoded emoji

The important design choice is that conditions are represented by *codes* (sunny, rain, storm), which map to display icons and labels through ICONS and LABELS lookup tables. Real weather APIs return numeric or string condition codes, so mapping codes → presentation in one place is exactly how you'd integrate one: you translate the API's codes to these keys once, and every icon and label across the card follows. Hardcoding emoji per day would make swapping in real data a rewrite; the lookup makes it a mapping.

Current conditions, prominent

The header pairs a large condition icon and temperature with the location, and a right-aligned meta block showing the label, "feels like," humidity, and wind. Giving the current temperature the most visual weight (largest type) matches how people read a weather widget — now first, outlook second.

A 5-day outlook row

Below, each day is an equal-width glassy tile (semi-transparent over the gradient, with backdrop-filter blur) showing the day name, its condition icon, and high/low temperatures — high bold, low dimmed, the standard hierarchy so the more relevant high temp dominates. Today's tile is subtly highlighted so the user can anchor the outlook to the present. The tiles lift slightly on hover for a touch of interactivity.

A cohesive gradient theme

The card uses a single blue gradient background with translucent white tiles, so it reads as one polished widget rather than a set of boxes. The glass tiles over the gradient are what give it the modern weather-app look, and they'd adapt to a different palette (a warm gradient for sunny, cool for rain) if you wanted condition-driven theming.

Data-driven and drop-in

The card renders from a CURRENT object and a FORECAST array, so wiring it to a real API means fetching, mapping the response into those shapes (and the codes into the icon keys), and rendering. It's a clear, dependency-free reference for the current-plus-outlook weather layout and the code-to-presentation mapping that makes weather data easy to swap in.

Units and locale are render-time concerns, not data concerns

Notice the markup builds temperature strings as d.hi + '°' rather than baking a unit into the stored number. That separation matters because units and locale are display decisions, not data: the same CURRENT/FORECAST shapes work whether you're showing Celsius or Fahrenheit, you just convert (f = c * 9/5 + 32) at the point you format the string, ideally behind a single toDisplayTemp() helper so a unit toggle only touches one place. The same goes for day names — FORECAST[i].day is currently a static label ("Tue", "Wed"); a real integration would derive it from each forecast entry's date with Intl.DateTimeFormat, so the card automatically shows day names in the visitor's locale instead of a hardcoded English string.