HVAC Duct CFM to Velocity FPM Calculator Specification

Overview

A professional, single-file browser tool designed to assist HVAC technicians, engineers, and building contractors in converting Airflow (CFM) to Air Velocity (FPM). The tool provides a clean, responsive interface that eliminates the need for manual calculations or complex spreadsheets.

Key Features

• Dual Duct Calculation Modes: Toggle between Rectangular and Round duct types.
• Instant Conversion: Real-time updates as the user types, using optimized JavaScript math functions.
• Unit Flexibility: Input duct dimensions in inches and airflow in CFM; output is instantly provided in FPM.
• Validation Engine: Built-in safeguards to prevent division by zero or negative dimension inputs.
• Results History Table: An in-memory, transient table that tracks the last 5 calculations for quick comparisons during a walkthrough.

UI/UX Design

• Aesthetic: Clean, "SaaS" aesthetic using a soft, professional light-mode color palette: Tailwind slate-50 backgrounds, blue-600 primary buttons, and slate-900 text.
• Typography: Sans-serif (e.g., Inter or system font) with high contrast for readability in field conditions.
• Layout:
  • Header: Sticky top header with the application name and a concise description.
  • Main Input: A card-based layout featuring a segmented control to switch between 'Rectangular' and 'Round' modes.
  • Input Fields: Large, touch-friendly text inputs for Width/Height or Diameter, and CFM.
  • Results Section: A prominent, high-visibility display card showing the calculated FPM.
• Animations: Subtle CSS transitions (transition-all, duration-300) on input focus and button interaction to ensure a premium feel.

Technical Implementation Constraints

• Single File: The entire application (HTML/CSS/JS) must exist within one HTML file. Use CDN links for any dependencies (e.g., Tailwind via CDN).
• Sandboxed Environment:
  • NO LocalStorage/SessionStorage: State management must be handled via pure JS variables.
  • NO External Dependencies that require build steps: Use standard script and link tags.
  • Zero-Alert Policy: All validation errors (e.g., "Please enter a positive number") must be displayed via inline text nodes within the UI, not browser alert() or prompt().
• Responsive Design: Must be fully fluid. On desktop, side-by-side inputs; on mobile, a single-column stacking layout.
• Accessibility: Ensure all inputs have proper labels and ARIA attributes for screen reader compatibility.

Color Palette (Light Mode)

• Primary: #2563eb (Blue-600) for primary actions.
• Background: #f8fafc (Slate-50) for the main page.
• Cards: #ffffff (White) with light shadow 0 4px 6px -1px rgba(0, 0, 0, 0.1).
• Text: #0f172a (Slate-900) for primary text, #475569 (Slate-600) for labels.