Calculator Page
Component Detail
User Interface
medium complexity
frontend
1
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Full-page interactive impact calculator that allows prospective organizations to input operational variables (number of peer mentors, monthly activities, current reporting method, coordinator hourly rate) and see real-time results showing time saved, cost reduction, and reporting accuracy improvement. Includes accessible form controls with sliders and number inputs, a results panel with animated metric cards, and a call-to-action linking to the demo booking form with pre-populated context.
calculator-page
Responsibilities
- Render input form with sliders and number fields for organizational variables
- Display real-time impact results as metrics update on input change
- Provide accessible WCAG 2.2 AA compliant form controls with proper labels and focus management
- Include call-to-action linking to demo booking with pre-populated calculator context
- Handle responsive layout for desktop and mobile viewports
Interfaces
renderCalculatorForm()
renderResultsPanel(metrics: ImpactMetrics)
handleInputChange(field: string, value: number)
handleReportingMethodChange(method: ReportingMethod)
generateBookingLink(context: CalculatorContext): string
renderMetricCard(label: string, value: string, description: string)
renderSliderInput(config: SliderConfig)
renderMethodSelector(options: ReportingMethod[])
validateInputRange(field: string, value: number): boolean