Ideal Body Weight (IBW) Calculator Specification

1. Project Overview

A lightweight, high-performance, single-file browser application designed to help users calculate their Ideal Body Weight using established medical formulas (Devine, Robinson, Miller, and Hamwi). The app is built for speed, accessibility, and a premium, clean light-mode user experience.

2. Core Features

• Multiple Formula Support: Calculate IBW using Devine (1974), Robinson (1983), Miller (1983), and Hamwi (1964) equations.
• Real-time Calculation: Instant updates as user input changes.
• Unit Toggle: Toggle between Imperial (inches/lbs) and Metric (cm/kg) units.
• Visual Feedback: Progress bars or color-coded indicators to show where the calculated weight falls relative to user input.
• Explanation Section: Brief, non-medical summaries of how each formula differs.

3. UI/UX Specification

• Aesthetic: Strictly light-mode. Use a color palette of white (#ffffff), off-white (#f8fafc), slate-grey text (#334155), and a professional primary blue (#2563eb).
• Layout:
  • Header: Simple, clear title and description.
  • Main Tool Area: A centered card containing input fields for gender (toggle switch), height (slider + input), and unit preference.
  • Results Section: A grid layout displaying the calculated result for all four formulas clearly.
  • Educational Section: A bottom section explaining the math behind the formulas for transparency.
• Animations: Subtle fade-ins for results, smooth transitions when toggling units, and focus shadows on input fields.

4. Technical Constraints (Strict Compliance)

• Single File: All CSS, HTML, and JS must be inside one .html file. CSS in <style>, JS in <script>.
• NO STORAGE: Do NOT use localStorage, sessionStorage, or cookies. Use state variables within JavaScript memory only.
• No External Dependencies: Minimize reliance on external scripts. Use CDNs only if absolutely necessary for styling (e.g., Tailwind CSS).
• Sandboxed Compatibility: Avoid any blocking calls like alert() or confirm(). Use custom div-based modals if user feedback is needed.
• Responsiveness: The tool must be fully functional on mobile devices, tablets, and desktops using CSS Flexbox/Grid.
• SEO: Ensure semantic HTML tags (<main>, <section>, <h1>, <h2>) are used to maximize search engine indexing.

5. Implementation Details

• JavaScript logic: Use standard arithmetic operations for the formulas.
  • Devine: IBW = 50kg + 2.3kg * (height_inches - 60) for men.
  • Miller: IBW = 56.2kg + 1.41kg * (height_inches - 60) for men.
  • Robinson: IBW = 52kg + 1.9kg * (height_inches - 60) for men.
  • Hamwi: IBW = 48kg + 2.7kg * (height_inches - 60) for men.
• Performance: High priority on immediate response time (sub-50ms) for UI interactions.