All projects · UI Components & Interactions
SlotFlow — Book Your Time Slot
An appointment-booking interface with a four-day selector and an hourly time-slot grid that reflects live availability.
An appointment-booking interface with a four-day selector and an hourly time-slot grid that reflects live availability. Selecting an open slot builds a confirmation summary and enables booking; confirming mutates the underlying data so the slot immediately shows as taken and the day's open-count drops.
- Data-array-backed availability that mutates on booking and re-renders across day and slot views
- Days that reach zero availability auto-disable and display a 'Full' state
- Distinct slot iconography for available (clock), selected (check), and booked (struck-through) states
- Dynamic confirmation card and CTA that reflect the exact day and time selected
Built with: HTML, CSS, Vanilla JavaScript, Data-driven rendering, Inline SVG icons, Google Fonts (Sora, Outfit)