Baseball Sabermetrics OPS and WHIP Calculator

Overview

A clean, responsive, single-file browser utility designed for baseball enthusiasts, fantasy managers, and analysts. This tool provides instant, accurate calculations for the two most vital sabermetric stats: OPS (Batting) and WHIP (Pitching).

Features

• OPS Calculator: Input Hits (H), Walks (BB), Hit By Pitch (HBP), At Bats (AB), Sac Flies (SF), and Total Bases (TB) to get an precise OPS output.
• WHIP Calculator: Input Walks (BB), Hits (H), and Innings Pitched (IP) to calculate total WHIP.
• Toggle Interface: Use a tabbed navigation system to switch between batting and pitching modes without reloading the page.
• Instant Validation: Real-time feedback if input data is mathematically invalid (e.g., negative numbers).
• Clean Design: A distraction-free UI optimized for mobile use at the ballpark or at a desk.

Technical Specification

• Architecture: Single HTML file containing all logic, structure, and styling.
• Libraries: Tailwind CSS (via CDN) for responsive design and layout. Google Fonts (Inter) for typography.
• State Management: Pure Vanilla JavaScript. Variables must be held in-memory (e.g., let battingData = {}). Do NOT use localStorage or sessionStorage.
• UI Constraints:
  • No popups: Use custom styled <div> elements for modals/errors.
  • No dark mode: Strict white/light-gray color palette.
• Responsiveness: Use CSS Grid/Flexbox to ensure the calculator is centered on desktop and full-width on mobile.

UI/UX Design

• Color Palette:
  • Primary: #2563eb (Professional Blue for actions).
  • Background: #f8fafc (Light gray/white).
  • Text: #1e293b (Dark Slate for high readability).
  • Accent: #64748b (Secondary info text).
• Animations: Subtle fade-in transitions for result fields using CSS transition: opacity 0.3s ease-in-out;.
• Interaction: Floating labels or placeholder text to guide the user on where to enter each statistic.

Developer Directives

1. Iframe Compliance: Ensure all links use target="_blank" rel="noopener noreferrer". Do not trigger any browser navigation that breaks the sandbox.
2. Input Handling: Use numeric <input type="number"> fields. Implement oninput events to calculate the results instantly without needing a 'Submit' button.
3. Math Logic:
   • OBP = (H + BB + HBP) / (AB + BB + SF + HBP)
   • SLG = TB / AB
   • OPS = OBP + SLG
   • WHIP = (BB + H) / IP
4. No External Dependencies: Only use CDN-linked assets. No npm or bundling tools permitted.