All projects · UI Components & Interactions
CoffeeHouse: Interactive Membership Savings Calculator & ROI Slider
An interactive digital membership savings calculator and ROI estimator for CoffeeHouse, featuring dynamic signature brew selection, custom daily…
An interactive digital membership savings calculator and ROI estimator for CoffeeHouse, featuring dynamic signature brew selection, custom daily coffee range slider with animated floating thumb badge, real-time weekly and yearly savings telemetry with a 7% member discount, developer parameter studio, and automated diagnostic test suite.
- Fulfills the challenge clue via the formula: Daily Coffees × 7 Days × (Standard Price × Discount Rate)
- Features 5 signature brew selector cards (Flat White $5.50, Latte $5.25, Cappuccino $5.00, Americano $4.00, Espresso $3.50)
- Includes a custom range slider (1 to 10 coffees/day) with a floating tooltip badge centered over the thumb
- Faithfully reproduces reference video values down to the exact cent across all 5 signature brews
- Recreates the authentic CoffeeHouse landing canvas with menu preview, Crafted with Passion story, and perks form
- Includes an Interactive ROI Parameter Studio with discount modifier, currency selector, presets, and 8-point diagnostic test runner
Built with: Vanilla JavaScript, HTML5 / CSS3, Range Slider UX, Reactive State, IEEE-754 Arithmetic, Dynamic Tooltip Positioning, Design System Tokens