Comprehensive Basal Metabolic Rate (BMR) Calculator Specification

Overview

A responsive, client-side web application designed to help users calculate their Basal Metabolic Rate (BMR) and Total Daily Energy Expenditure (TDEE). The interface focuses on clarity, medical-grade accuracy, and ease of use.

Design & Aesthetics

• Color Palette: Professional clinical aesthetic using cool-toned greens (#2E7D32), slate grays (#455A64), and clean whites (#FFFFFF).
• Typography: Sans-serif, highly readable fonts (Inter or Roboto) to ensure numerical data is crisp.
• Layout Structure:
  • Header: Clean title and a brief definition of BMR.
  • Main Input Column (Left): Form fields with clear labels and tooltips. Includes unit toggles (Imperial vs. Metric).
  • Results Column (Right): Dynamic visual dashboard displaying BMR, TDEE, and a calorie breakdown for different goals (Fat Loss, Maintenance, Muscle Gain).
• Animations: Subtle fade-ins when results update; smooth counting animation for the final calorie figures.

Features & Functionality

1. Advanced Input Module

• Biometric Inputs: Fields for age, weight, and height with smart unit conversion (lbs/kg, ft/in/cm).
• Activity Multiplier: A slider with clear presets ranging from 'Sedentary (office job)' to 'Athlete (intense daily training)'.
• Gender-Specific Algorithms: Automatically selects the correct Mifflin-St Jeor equation coefficients for men and women.

2. Comprehensive Results Dashboard

• Dynamic Output: Immediate calculation upon input change (debounce logic).
• Goal Breakdown: A table showing precise calorie targets based on the chosen goal (e.g., 500 calorie deficit vs 500 calorie surplus).
• Visual Data Representation: A progress gauge indicating where the user's BMR sits relative to typical ranges.

3. Utility Features

• Local Persistence: Uses localStorage to save the last inputs so the user doesn't lose their data on page refresh.
• Data Export: A button to export the results as a clean, printable PDF or CSV format for tracking over time.
• Informational Tooltips: Help icons next to inputs that explain why that variable impacts metabolic rate.

4. Technical Stack

• Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3 (using Flexbox/Grid for responsiveness).
• Performance: Zero-dependency, pure client-side calculation for instant speed and complete user privacy.
• Accessibility: Fully ARIA-compliant forms to ensure screen reader compatibility for all users.