SSL Certificate Expiry Monitor — Free HTML CSS JS Snippet

An expired SSL certificate is one of the most avoidable outages in production — the fix is trivial (renew it) but the failure mode is total (browsers block the whole site with a hard error). This widget exists to make expiry impossible to miss: a list of monitored domains sorted soonest-expiring-first, each with a days-remaining count colored against two thresholds, and a summary badge that surfaces the single worst case at the top of the tile.

Sorting by urgency, not by domain name or list order

render() calls DOMAINS.slice().sort(...) on every render, ordering domains by ascending daysLeft rather than showing them in whatever order they happen to be defined in the array. This is a deliberate choice for a monitoring widget specifically — the domain closest to expiring is the one that needs attention, so it should always be first regardless of how many domains are being watched or what order they were added in. The .slice() before .sort() avoids mutating the original DOMAINS array in place, keeping the underlying data order stable even though the rendered order changes.

Two thresholds, three states

stateFor() uses WARN_THRESHOLD (21 days) and CRIT_THRESHOLD (10 days) as the only two numbers driving every color decision in the widget — the icon background, the days-left text color, and the progress track fill color all derive from the same stateFor(d.daysLeft) call per domain, so there's exactly one place to adjust if your organization's renewal policy uses different lead times.

The progress track encodes elapsed lifetime, not urgency directly

Each domain's track fill width is daysLeft / VALIDITY_WINDOW_DAYS — the *fraction of a typical certificate's total lifetime* still remaining, not a fraction of the warning threshold. VALIDITY_WINDOW_DAYS defaults to 90 (a common lifetime for short-lived certificates like those issued by Let's Encrypt), so a cert with 60 days left shows a track roughly two-thirds full, giving a sense of "how much of this certificate's life is used up" at a glance, distinct from the days-left number itself which answers "how much time until action is required."

A summary badge that surfaces the worst case, not an average

The header badge never averages or sums anything across domains — it finds the single worst (minimum) daysLeft value and bases its text and color entirely on that one domain's state, then further distinguishes "N expiring critically soon" from "N expiring soon" based on whether any domain has crossed the critical threshold. A monitoring summary that averaged expiry across many healthy domains could mask one single domain about to expire — showing the worst case first is the only representation that can't hide an urgent problem behind a comfortable-looking average.