webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

Flight Status Tracker — Free Live Status Card Snippet

Flight Status Tracker · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGDashboard UI

Copy & paste

Source Code

<div class="fst-card" id="fstCard">
  <div class="fst-top">
    <span class="fst-flight">DL 1420</span>
    <span class="fst-pill" id="fstPill">On Time</span>
  </div>
  <div class="fst-route">
    <div class="fst-endpoint">
      <span class="fst-code">SFO</span>
      <span class="fst-city">San Francisco</span>
    </div>
    <div class="fst-line">
      <span class="fst-dot"></span>
      <svg class="fst-plane" viewBox="0 0 24 24" fill="none" id="fstPlane"><path d="M2 12h4l3-3h2l-2 3h5l3-4h2l-2 4h1a2 2 0 0 1 0 4h-1l2 4h-2l-3-4H9l2 3H9l-3-3H2v-4z" fill="currentColor"/></svg>
      <span class="fst-dot"></span>
    </div>
    <div class="fst-endpoint fst-endpoint-right">
      <span class="fst-code">JFK</span>
      <span class="fst-city">New York</span>
    </div>
  </div>
  <div class="fst-times">
    <div class="fst-time-col">
      <span class="fst-time-label">Departure</span>
      <span class="fst-time-sched">6:45 AM</span>
      <span class="fst-time-actual" id="fstDepActual">6:45 AM</span>
    </div>
    <div class="fst-time-col fst-time-col-right">
      <span class="fst-time-label">Arrival</span>
      <span class="fst-time-sched">3:10 PM</span>
      <span class="fst-time-actual" id="fstArrActual">3:10 PM</span>
    </div>
  </div>
  <div class="fst-meta">
    <div class="fst-meta-item">
      <span class="fst-meta-label">Terminal</span>
      <span class="fst-meta-value">2</span>
    </div>
    <div class="fst-meta-item">
      <span class="fst-meta-label">Gate</span>
      <span class="fst-meta-value" id="fstGate">D14</span>
    </div>
    <div class="fst-meta-item">
      <span class="fst-meta-label">Seat</span>
      <span class="fst-meta-value">14C</span>
    </div>
  </div>
  <div class="fst-controls">
    <button type="button" class="fst-btn" data-status="on-time">On Time</button>
    <button type="button" class="fst-btn" data-status="delayed">Delayed</button>
    <button type="button" class="fst-btn" data-status="boarding">Boarding</button>
    <button type="button" class="fst-btn" data-status="departed">Departed</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Single status attribute
data-status drives every color change.
Scheduled vs actual
Struck-through schedule beside bold actual time.
Recoloring status pill
Green, orange, blue, gray across four states.
Animated route line
Plane glyph nudges forward on departure.
Gate reassignment
Gate value updates independently per status.
Zero dependencies
Plain HTML, CSS, and JS, no CDN.
Simple state function
setStatus() is the only integration point.
Accessible toggle buttons
aria-pressed marks the active status button.

About this UI Snippet

Flight Status Tracker — A Status Card That Recolors With the Flight

Screenshot of the Flight Status Tracker snippet rendered live

The flight status tracker is the compact card airlines and trip-planning apps use to show a single flight's health at a glance — origin and destination, a route line with a plane glyph, scheduled vs. actual times, and a status pill that changes color as the flight moves through its lifecycle. This snippet builds the whole thing in plain HTML, CSS, and JavaScript, no dependencies.

One data-status attribute drives everything

The card's outer element carries a data-status attribute — on-time, delayed, boarding, or departed — and every color change in the CSS is a [data-status="..."] selector keyed off that single source of truth. The JavaScript's setStatus() function just swaps the attribute and updates a handful of text nodes; there's no class-list juggling or inline style writes scattered through the script.

Scheduled vs. actual times

Each time column shows a struck-through scheduled time alongside a bold actual time. When the status flips to Delayed, the scheduled time gets a text-decoration: line-through and the actual time recolors to orange — a pattern lifted directly from real airline apps, where the delta between scheduled and actual is the whole point of the widget.

Route line with a plane glyph

Between the two airport codes sits a thin line with two dots and an inline SVG plane icon in the middle. It's built with a pseudo-element line and flex layout rather than an image, so it recolors and repositions with pure CSS — the plane even nudges forward when the flight departs, hinting at motion without a real animation loop.

Gate and terminal that change with status

Gate assignments often change close to boarding, so this card lets the gate value update independently of the status pill's color — moving from D14 to D22 when boarding starts, a detail that mirrors how airport displays actually behave.

Fully self-contained state

No external state library, no CDN. Four buttons at the bottom simulate an airline's push updates for demo purposes; in production you'd call setStatus() from your own polling or websocket handler instead of a click listener.

Customizing it

Add a baggage claim field, wire in real flight data from an aviation API, or swap the pill copy for delay-reason text. Pair it with a boarding pass, a seat picker, or a flight search form upstream.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA route card with times, gate, and status pill renders.
  2. 2
    Click the status buttonsThe pill, times, and gate update together.
  3. 3
    Watch Delayed strike the scheduleScheduled time gets struck through, actual time recolors.
  4. 4
    Wire real dataCall setStatus() from your polling or websocket handler.
  5. 5
    Restyle the route lineAdjust the line, dots, and plane glyph in CSS.
  6. 6
    Add fieldsExtend the meta row with baggage claim or aircraft type.

Real-world uses

Common Use Cases

Trip dashboards
Show live flight status beside a boarding pass on a trip dashboard, with one data-status attribute driving every colour change in the card.
Airline apps
Pair with a seat picker after check-in, so passengers see their seat and the flight's health together.
Booking flows
Follow a flight search form result with a status snapshot once a flight is chosen, so travellers see how reliable it is.
Airport displays
Show gate and status changes at a glance, with the status pill recolouring for On Time, Delayed, Boarding and Departed.
Travel agent monitoring
Monitor several client flights in one view, using struck-through scheduled times beside bold actual times to highlight delays.
Related: Idle Detection Badge
See the Idle Detection Badge for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The card's outer element carries a data-status attribute set to on-time, delayed, boarding, or departed. Every color rule in the CSS is scoped to a [data-status="..."] selector, so setStatus() only needs to change that one attribute and every dependent color — pill, times, border — updates through CSS alone.

Each time column renders two lines: a scheduled time with text-decoration applied conditionally, and a bold actual time. When status becomes delayed, the CSS strikes through the scheduled time and recolors the actual time to orange, visually showing the delta the way real airline status pages do.

No, it's an inline SVG path, so it inherits currentColor and recolors or repositions with plain CSS. It sits on a route line built from a pseudo-element and two dots, and nudges forward slightly when the flight departs to hint at motion.

Replace the four demo buttons with your own polling or websocket handler and call setStatus(status) with on-time, delayed, boarding, or departed whenever new data arrives. You can also extend statusConfig with real departure/arrival times and gate values pulled from an aviation data API.

Yes. Keep data-status as a piece of state (useState, a ref, or a signal) on the card element, and reactively update the attribute plus the text fields when new flight data arrives. The CSS ports unchanged since all the visual logic lives in attribute selectors.