Event Schedule Explorer

A searchable, filterable conference schedule UI with day switching, track/accessibility chips, expandable session cards and live "happening now" detection — all client-side.

The Problem

Multi-day events with parallel stages, multiple tracks and accessibility requirements need a schedule interface that lets attendees quickly find what matters to them. Printed schedules and static PDFs fail at filtering, searching and real-time awareness. The interface needs to work well on phones held in one hand during a busy conference.

The Solution

A single-page schedule explorer driven by a JSON event array. Every filter — day, stage, track, accessibility, free-text search — narrows the list instantly with no server round-trip. Sessions render as expandable <details> cards showing participants, moderation, synopsis and accessibility badges.

flowchart TD
    A[JSON Event Data] --> B[Build Controls]
    B --> C[Stage Select]
    B --> D[Track Chips]
    B --> E[Accessibility Chips]
    B --> F[Search Input]
    C & D & E & F --> G[Filter Pipeline]
    G --> H[Render Cards]
    H --> I[Live 'Now' Detection]

Loading

Filters

• Day tabs — switch between event days; updates stage/track options accordingly
• Stage select — dropdown populated from the event data (Main Stage, Workshop Room, Demo Area, etc.)
• Track chips — horizontally scrollable chip bar with All/None toggles; checked chips use inclusive OR
• Accessibility chips — filter to sessions with Libras interpretation; chips use AND (all selected must match)
• Free-text search — matches against title, synopsis, stage, track, type, speaker names and roles

Session Cards

Each card is a native <details> element with:

• Time block — start/end in tabular-nums with visual separator
• Title, host name, badges — type (Keynote, Panel, Workshop…), track, stage, "Now" indicator, Libras badge
• Expandable body — overview panel, participant list, moderation panel, accessibility panel
• "Now" highlight — cards matching the current clock get an orange glow border and auto-open

Technical Highlights

• Zero dependencies: no framework, no build step, no external JS libraries. One HTML file, one CSS file, one JS file.
• Native <details>/<summary>: expandable cards without custom accordion JS; the chevron rotates via CSS on [open].
• Responsive from 320px to 1024px: six breakpoints progressively widen the time block, increase font sizes and switch participant lists to a 2-column grid at 900px+.
• Horizontal chip scrolling with fade masks: mask-image gradients on .chips-scroll create edge fades; on wider screens (640px+) chips wrap instead of scrolling.
• Live clock detection: isNow() compares the event's day/start/end against new Date() to highlight and auto-open the current session; the "Now" button scrolls to it.
• aria-live result count: the results bar announces filter changes to screen readers via aria-live="polite".
• prefers-reduced-motion: all animations and transitions are disabled when the user's OS requests reduced motion.
• Backdrop blur header: sticky header uses backdrop-filter: blur(24px) saturate(1.5) for a frosted-glass effect.

Stack

• Language: Vanilla JavaScript ES6+ (~420 lines, IIFE module)
• Styling: Pure CSS with custom properties (~706 lines)
• Layout: CSS Grid for day tabs and card summaries; Flexbox for everything else
• Fonts: System font stack (system-ui, -apple-system, …)
• Dependencies: None

Usage

1. Open event-schedule-explorer.html in a browser.
2. Switch days with the date tabs at the top.
3. Use the filters (stage, track chips, accessibility chips, search) to narrow the schedule.
4. Click a session card to expand details.
5. If a session is happening right now, click Now to scroll to it.

The event data lives in the EVENTS array at the top of event-schedule-explorer.js. To use real data, replace that array — the controls (stages, tracks, accessibility options) are built dynamically from whatever the data contains.

No API keys or external services required. Everything runs client-side.