Technical Specification: Homebrew IBU Calculator

1. Overview

A professional-grade, single-file, browser-based Homebrew IBU Calculator. The tool empowers homebrewers to precisely calculate International Bitterness Units (IBU) using the Tinseth formula. It provides a clean, responsive interface to manage multiple hop additions and calculate cumulative bitterness.

2. Shared Constraints Compliance

• Single File: All HTML, CSS, and JS contained in one file.
• No Storage: All calculations are performed in-memory. State is reset on page refresh. No cookies, localStorage, or IndexedDB.
• No Dependencies: Use Tailwind CSS via CDN. Pure vanilla JavaScript.
• Light Mode Only: High-contrast, clean aesthetic with white backgrounds, slate grays, and brand-neutral primary accent colors (e.g., a professional sage green).
• Sandbox Ready: No popups or external navigation. All links use target="_blank" and rel="noopener noreferrer".

3. UI/UX Specification

Layout

• Header: Sticky header displaying "Homebrew IBU Calculator" with a brief subtitle: Tinseth formula based estimation.
• Main Tool Area:
  • Recipe Constants Section: Two columns of numeric inputs for "Batch Volume (Gallons/Liters)" and "Boil Gravity (SG)".
  • Hop Addition List: A dynamic table/list layout. Each row contains inputs for: Hop Name (text), Weight (grams/oz), Alpha Acid (%), Time (minutes), and a "Remove" action button.
  • Controls: A primary "Add Hop Addition" button.
• Results Section: A prominent "Summary Card" that updates in real-time as the user types, displaying "Total Calculated IBU" and "Estimated Utilization".

Aesthetics

• Color Palette: Background #f8fafc, Surface #ffffff, Text #1e293b, Primary Action (Button) #10b981 (Sage Green), Border Color #e2e8f0.
• Typography: Sans-serif (system fonts like Inter/Roboto).
• Animations:
  • Smooth entry animation for new hop rows (transition: opacity 0.3s ease-in).
  • Soft hover states on inputs and buttons using subtle shadow elevations.

4. Feature List

1. Dynamic Addition Engine: Users can add or delete unlimited hop entries. State is managed via a Javascript array const hops = [].
2. Tinseth Formula Logic:
   • Utilization = 1.65 * 0.000125^(BoilGravity - 1) * ((1 - exp(-0.04 * Time)) / 4.15)
   • IBU = (Weight * AA% * Utilization * 74.89) / Volume
3. Unit Toggle: Simple toggle for Imperial (oz/gal) or Metric (g/L) units (affects labels only; conversion factor 74.89 for Imperial, adjusted for metric).
4. Instant Calculation: Real-time feedback loop. No "Calculate" button required; inputs trigger an oninput listener to update the results display instantly.

5. Developer Instructions

• Initialize the app with one default empty row.
• Use document.createElement for new rows to ensure clean DOM manipulation.
• Ensure responsive design: stack the inputs on mobile and expand to a horizontal grid on desktop.
• Do not use any library for state management; maintain a simple render() function that clears and re-draws the list based on the hops array whenever the data changes.