Free Online Body Mass Index (BMI) Calculator Specification

Overview

A clean, professional, and responsive BMI calculator designed for ease of use. This tool provides instant health feedback, visual indicators, and a session-based calculation log. It is optimized for mobile and desktop usage.

Core Features

• Dual-Unit Toggle: Switch seamlessly between Metric (cm/kg) and Imperial (ft/in/lbs).
• Visual BMI Gauge: A color-coded scale (Underweight to Obese) to indicate where the user falls.
• Instant Calculation: Real-time feedback as the user types or toggles units.
• Session History: An in-memory table tracking calculations performed during the current session.
• Export/Action Buttons: Options to clear history or copy the current session log to the clipboard.
• Educational Context: Brief info section below the calculator explaining the BMI categories.

UI/UX Design

• Layout:
  • Header: Simple, bold title with a clean subtitle.
  • Main Card: A centered, white card with a subtle shadow (elevation) containing the inputs and result.
  • Input Section: Large, touch-friendly input fields with clear labels.
  • Results Section: A prominent display showing the BMI index, followed by a color-coded gauge bar.
  • History Section: A secondary card underneath the calculator displaying a chronological list of calculations made in the current session.
• Color Palette (Light Mode Only):
  • Primary: Clean, health-focused teal (#2D9CDB).
  • Background: Light off-white/gray (#F8F9FA).
  • Text: Dark slate (#2D3436) for readability.
  • Alerts/Categories: Specific color-coding for status (Blue for Underweight, Green for Healthy, Orange for Overweight, Red for Obese).
• Animations:
  • Smooth fading transitions for the result card when values change.
  • Subtle hover effects on buttons (slight lift and brightness change).

Technical Implementation Directives

• Architecture: One single HTML file including internal CSS and Vanilla JavaScript.
• Constraints Compliance:
  • NO localStorage: Data must be kept in a JavaScript array variable. Persistence is not required as it violates sandbox rules.
  • Responsive: Use Tailwind CSS or similar grid/flexbox techniques to ensure the tool adapts from smartphone (vertical stack) to desktop (side-by-side or wide view).
  • Vanilla JS: Do not use React, Vue, or Angular. Use standard DOM manipulation.
  • Aesthetics: Avoid browser defaults (e.g., standard buttons/inputs). Style with custom CSS for a modern, SaaS-like appearance with rounded corners (border-radius 8px+) and soft shadows.