A minimalist product pricing calculator built with Alpine.js. This project is a part of my "Frameworks Mini Projects" where I'm trying and getting to know minimalist frameworks.
- Real-Time Price Updates
- Three Configuration Options (Size, Color, Quantity)
- Dynamic Price Breakdown showing calculation components
- Computed Properties for automatic price calculation
- Alpine.js
- Vanilla CSS
- Pure HTML
x-data directive defines the state (size, color, quantity) and pricing rules. Computed properties (sizePrice, colorPremium, totalPrice) automatically recalculate when any selection changes using x-model bindings. The price breakdown displays each component using x-text directives.