# Product Requirements Document: BMI Calculator App

## 1. Overview

The BMI Calculator app is a single-page web application that allows users to calculate their Body Mass Index (BMI) by entering their height and weight. The application provides instant BMI calculation results along with health category classification (underweight, normal weight, overweight, obese) and stores calculation history for reference. This is a lightweight, user-friendly tool designed for quick health assessments without requiring user authentication.

## 2. User Roles

### Anonymous User (Default Role)
- Enter height and weight measurements
- Select measurement units (metric or imperial)
- Calculate BMI instantly
- View BMI result and health category
- View calculation history in current session
- Clear calculation history
- Access BMI information and health guidelines

## 3. Core Entities

### Calculation
Represents a single BMI calculation performed by a user.

**Attributes:**
- `id` (string/UUID): Unique identifier for the calculation
- `height` (number): Height value entered by user
- `weight` (number): Weight value entered by user
- `heightUnit` (string): Unit of height measurement (cm, m, ft, in)
- `weightUnit` (string): Unit of weight measurement (kg, lbs)
- `bmiValue` (number): Calculated BMI result
- `category` (string): Health category classification
- `timestamp` (datetime): When the calculation was performed

### MeasurementUnit
Defines available measurement systems and units.

**Attributes:**
- `id` (string): Unique identifier
- `system` (string): Measurement system (metric, imperial)
- `heightUnits` (array): Available height units for this system
- `weightUnits` (array): Available weight units for this system
- `defaultHeightUnit` (string): Default height unit
- `defaultWeightUnit` (string): Default weight unit

### BMICategory
Defines BMI ranges and their corresponding health categories.

**Attributes:**
- `id` (string): Unique identifier
- `name` (string): Category name (e.g., "Normal weight")
- `minBMI` (number): Minimum BMI value for this category
- `maxBMI` (number): Maximum BMI value for this category
- `description` (string): Health information for this category
- `colorCode` (string): UI color indicator for the category

## 4. Entity Relationships

### Calculation ↔ MeasurementUnit
- **Relationship Type:** Many-to-One (reference)
- **Description:** Each Calculation references specific measurement units from the MeasurementUnit system, but doesn't create a formal foreign key relationship since units are predefined constants.

### Calculation ↔ BMICategory
- **Relationship Type:** Many-to-One (computed)
- **Description:** Each Calculation is associated with one BMICategory based on the calculated BMI value. This is a computed relationship, not stored directly.

### Session ↔ Calculation
- **Relationship Type:** One-to-Many
- **Description:** A browser session can have multiple Calculations stored in local storage. Calculations are session-scoped and not persisted to a backend database.

## 5. Key Workflows

### Workflow 1: Calculate BMI

**Actors:** Anonymous User

**Steps:**
1. User lands on the BMI Calculator page
2. System displays default measurement unit system (metric)
3. User selects preferred measurement system (metric or imperial)
4. System updates input fields with appropriate units
5. User enters height value
6. User enters weight value
7. System validates inputs (non-negative, numeric values)
8. User clicks "Calculate BMI" button
9. System converts measurements to standard units if needed
10. System calculates BMI using formula: BMI = weight(kg) / (height(m))²
11. System determines BMI category based on calculated value
12. System displays BMI result with category and color indicator
13. System adds calculation to history
14. System stores calculation in browser local storage

### Workflow 2: View Calculation History

**Actors:** Anonymous User

**Steps:**
1. User performs one or more BMI calculations
2. System displays history section with list of previous calculations
3. Each history entry shows: timestamp, measurements, BMI result, category
4. User can scroll through history entries
5. History persists during browser session via local storage

### Workflow 3: Clear History

**Actors:** Anonymous User

**Steps:**
1. User views calculation history
2. User clicks "Clear History" button
3. System prompts for confirmation
4. User confirms action
5. System removes all calculations from local storage
6. System clears history display
7. System shows empty state message

### Workflow 4: Switch Measurement Units

**Actors:** Anonymous User

**Steps:**
1. User selects different measurement system (metric ↔ imperial)
2. System updates input field labels and placeholders
3. System clears current input values (optional: converts existing values)
4. User enters new measurements in selected units
5. Calculation proceeds with selected unit system

## 6. Features & Requirements

### Module: BMI Calculator Form

**FR-1.1:** Display input field for height with label and unit indicator
- Support decimal values
- Show placeholder text with example value
- Display current unit (cm, m, ft, in)

**FR-1.2:** Display input field for weight with label and unit indicator
- Support decimal values
- Show placeholder text with example value
- Display current unit (kg, lbs)

**FR-1.3:** Provide measurement system toggle/selector
- Options: Metric, Imperial
- Default to Metric
- Persist selection in session

**FR-1.4:** Display "Calculate" button
- Enabled only when valid inputs are provided
- Show loading state during calculation (if applicable)
- Clear visual affordance for primary action

**FR-1.5:** Implement real-time input validation
- Show error messages for invalid inputs
- Highlight invalid fields
- Prevent calculation with invalid data

### Module: BMI Results Display

**FR-2.1:** Display calculated BMI value
- Show value rounded to 1 decimal place
- Display prominently with large, readable font
- Include "BMI" label

**FR-2.2:** Display BMI category
- Show category name (Underweight, Normal weight, Overweight, Obese)
- Use color coding for visual indication
- Display category description/health information

**FR-2.3:** Show BMI scale visualization
- Visual indicator (gauge, bar, or scale) showing where result falls
- Mark category boundaries
- Highlight current BMI position

**FR-2.4:** Display health information
- Show recommended BMI range
- Provide brief health guidance based on category
- Include disclaimer about consulting healthcare professionals

### Module: Calculation History

**FR-3.1:** Display list of previous calculations
- Show most recent calculations first (reverse chronological)
- Display timestamp for each calculation
- Show input values with units
- Show BMI result and category

**FR-3.2:** Implement history storage
- Store calculations in browser local storage
- Persist across page refreshes
- Limit to current browser session or configurable retention

**FR-3.3:** Provide "Clear History" functionality
- Button to remove all history entries
- Confirmation dialog before clearing
- Show empty state when no history exists

**FR-3.4:** Limit history entries
- Store maximum of 10 most recent calculations
- Automatically remove oldest when limit exceeded

### Module: Information & Help

**FR-4.1:** Display BMI information section
- Explain what BMI is
- Show BMI formula
- List BMI categories with ranges

**FR-4.2:** Provide measurement conversion reference
- Show conversion formulas
- Display common conversions (kg/lbs, cm/inches)

**FR-4.3:** Include health disclaimer
- State that BMI is a screening tool, not diagnostic
- Recommend consulting healthcare professionals
- Note limitations of BMI (doesn't account for muscle mass, etc.)

### Module: User Interface

**FR-5.1:** Implement responsive design
- Mobile-first approach
- Adapt layout for tablet and desktop screens
- Ensure touch-friendly controls on mobile

**FR-5.2:** Provide clear visual hierarchy
- Prominent calculator form
- Secondary history section
- Tertiary information section

**FR-5.3:** Implement accessible design
- WCAG 2.1 AA compliance
- Keyboard navigation support
- Screen reader compatibility
- Sufficient color contrast

**FR-5.4:** Support light/dark mode (optional enhancement)
- Detect system preference
- Manual toggle option
- Persist preference

## 7. Business Rules

### BR-1: BMI Calculation
- BMI formula: `BMI = weight (kg) / (height (m))²`
- Result must be rounded to 1 decimal place
- Calculation only proceeds with valid, positive numeric inputs

### BR-2: BMI Categories
- **Underweight:** BMI < 18.5
- **Normal weight:** 18.5 ≤ BMI < 25.0
- **Overweight:** 25.0 ≤ BMI < 30.0
- **Obese:** BMI ≥ 30.0

### BR-3: Measurement Units
**Metric System:**
- Height: centimeters (cm) or meters (m)
- Weight: kilograms (kg)

**Imperial System:**
- Height: feet and inches (ft, in) or inches only
- Weight: pounds (lbs)

### BR-4: Unit Conversions
- 1 inch = 2.54 cm
- 1 foot = 12 inches
- 1 pound = 0.453592 kg
- 1 meter = 100 cm

### BR-5: Input Validation
- Height must be > 0 and < 300 cm (or equivalent)
- Weight must be > 0 and < 500 kg (or equivalent)
- Only numeric values with optional decimal point allowed
- Maximum 2 decimal places accepted

### BR-6: History Management
- Maximum 10 calculations stored
- Oldest calculation removed when limit exceeded
- History stored in browser local storage
- History cleared when user explicitly requests or clears browser data

### BR-7: Data Persistence
- No server-side data storage
- All data stored client-side only
- No user authentication required
- No personal data collected or transmitted

## 8. Non-Functional Requirements

### Performance

**NFR-1:** Page Load Time
- Initial page load must complete within 2 seconds on 3G connection
- Time to Interactive (TTI) under 3 seconds

**NFR-2:** Calculation Speed
- BMI calculation must complete within 100ms
- UI must update immediately upon calculation completion

**NFR-3:** Application Size
- Total bundle size (JS + CSS) must not exceed 200KB (gzipped)
- Images and assets must be optimized for web delivery

### Security

**NFR-4:** Data Privacy
- No personal data transmitted to servers
- All calculations performed client-side
- No cookies or tracking mechanisms (except essential local storage)

**NFR-5:** Input Sanitization
- All user inputs must be sanitized to prevent XSS attacks
- Validate data types on client-side before processing

**NFR-6:** Content Security
- Implement Content Security Policy (CSP) headers
- Use HTTPS for application delivery

### Scalability

**NFR-7:** Client-Side Scalability
- Application must function entirely client-side
- No backend infrastructure required
- Can be hosted on static file servers or CDN

**NFR-8:** Browser Support
- Support last 2 versions of major browsers (Chrome, Firefox, Safari, Edge)
- Graceful degradation for older browsers
- Mobile browser support (iOS Safari, Chrome Mobile)

### Usability

**NFR-9:** Accessibility
- WCAG 2.1 Level AA compliance
- Keyboard navigation for all interactive elements
- Screen reader support with proper ARIA labels
- Minimum contrast ratio of 4.5:1 for text

**NFR-10:** Internationalization (Future Enhancement)
- Support for multiple languages
- Locale-specific number formatting
- RTL language support

### Reliability

**NFR-11:** Error Handling
- Graceful error messages for invalid inputs
- Fallback behavior if local storage unavailable
- No application crashes from user input

**NFR-12:** Browser Compatibility
- Function correctly with JavaScript enabled
- Display message if JavaScript disabled
- Handle local storage quota exceeded gracefully

### Maintainability

**NFR-13:** Code Quality
- Modular, component-based architecture
- Comprehensive code comments
- Unit test coverage > 80%

**NFR-14:** Documentation
- Inline code documentation
- User help documentation
- Deployment instructions

### Compatibility

**NFR-15:** Device Support
- Responsive design for mobile (320px+), tablet (768px+), desktop (1024px+)
- Touch and mouse input support
- Portrait and landscape orientations

**NFR-16:** Local Storage
- Graceful degradation if local storage unavailable
- Handle storage quota limits
- Clear error messaging if storage fails

---

## Appendix: BMI Reference Table

| Category | BMI Range | Color Code |
|----------|-----------|------------|
| Underweight | < 18.5 | Blue (#3B82F6) |
| Normal weight | 18.5 - 24.9 | Green (#10B981) |
| Overweight | 25.0 - 29.9 | Yellow (#F59E0B) |
| Obese | ≥ 30.0 | Red (#EF4444) |

## Appendix: Measurement Conversion Examples

- 170 cm = 1.7 m = 5.58 ft = 66.93 in
- 70 kg = 154.32 lbs
- 5'9" = 69 in = 175.26 cm = 1.75 m
- 150 lbs = 68.04 kg