Technical Specification: Water Heater Expansion Tank Sizing Tool

Overview

A high-precision, browser-based utility designed for plumbers, HVAC technicians, and facility managers to calculate the required thermal expansion tank volume. The app will provide an instant, accurate recommendation based on system parameters, ensuring compliance with plumbing codes and system safety.

Core Features

• Dynamic Inputs:
  • Total System Volume (Gallons).
  • Cold Water Supply Temperature (°F).
  • Maximum Water Heater Temperature (°F).
  • Incoming Supply Pressure (PSI).
  • Maximum System Pressure (PSI).
• Real-time Calculation: The app will calculate the expansion factor and display the required acceptance volume immediately upon input changes.
• Standard Size Recommendation: A logic-based output that maps the required volume to standard industry tank sizes (e.g., 2, 4.5, 9 gallons).
• Educational Tooltips: Hover or tap indicators explaining why specific variables matter (e.g., impact of high supply pressure).
• Reset Mechanism: A one-click button to clear all fields without reloading the page.

UI Layout

• Header: Clean, centered title: "Water Heater Expansion Tank Calculator".
• Main Tool Area (Centered Card):
  • Two-column grid for desktop (inputs on left, results on right). Stacked for mobile.
  • Input Section: Styled input groups with floating labels, increment/decrement controls for numeric fields, and clear validation for out-of-bounds inputs (e.g., Temp cannot be < 32°F).
  • Results Section: A high-contrast callout box displaying the "Minimum Required Volume" and a separate "Recommended Standard Tank Size" badge.
• Visual Aesthetic:
  • Color Palette: White background (#FFFFFF), slate grey text (#334155) for readability, and professional blue (#2563EB) for interactive elements/CTA buttons.
  • Shadows: Soft, diffused drop-shadows on the main card container to create a subtle depth (SaaS aesthetic).
  • Transitions: Smooth fade and slide animations (150ms ease-in-out) when the result card updates.

Technical Constraints & Directives

• Architecture: Single-file HTML/CSS/JS.
• No Persistence: Use only in-memory JavaScript variables. ABSOLUTELY NO localStorage, sessionStorage, or cookies. The application must work flawlessly in a restricted/sandboxed iframe.
• State Management: All calculations must be performed on the fly using standard arithmetic. No external state libraries required.
• Browser Compatibility: Must be fully responsive from 320px width up to 1440px+.
• No External Dependencies: Use standard CDN links for CSS (e.g., Tailwind via CDN) or pure CSS. Keep logic pure Vanilla JS.
• Alerting: Implement a custom DOM-based modal for error handling (e.g., invalid input) instead of using window.alert().