Features:
- Add cups as a unit option that only works with kcal/cup energy measurements
- Cups button is disabled with tooltip when kcal/cup is not selected
- Auto-select cups when user selects kcal/cup as energy unit
- Auto-switch to appropriate units when changing energy measurement types
- Calculate cup amounts directly from calories without density assumptions
Fixes:
- Ensure cups display correct values immediately upon auto-selection
- Fix "Per day" radio button to be pre-selected when feeding config becomes visible
- Handle empty unit values with failsafe fallback to active button
Technical details:
- Direct calorie-to-cups conversion bypassing gram conversions
- Pre-calculate cups values in food breakdown for efficient display
- Set unit before updating calculations to avoid timing issues
- Added CSS styling for disabled button state across all themes
- Added feeding configuration section with daily/per-meal toggle
- Implemented meals per day selector (1-10 meals)
- Updated all calculations to support per-meal division
- Dynamic unit labels change from "/day" to "/meal"
- Added helpful meal count display for multi-day calculations
- Proper dark theme support for new UI elements
- Mobile responsive design for feeding controls
- Centered meal input group for better UX
This feature allows users to easily switch between viewing daily food amounts
and per-meal portions, making feeding schedules more practical to follow.
- Move from 3-file structure to organized 5-file structure
- Create css/ and js/ subdirectories for better organization
- Split styles into main.css and themes.css for clarity
- Extract configuration constants to separate config.js file
- Rename template.html to index.html for clarity
- Update build.js to handle new organized structure
- Replace magic numbers with CALCULATOR_CONFIG constants
New structure:
src/
├── index.html (HTML template)
├── css/
│ ├── main.css (Core styles)
│ └── themes.css (Theme variations)
└── js/
├── config.js (Configuration constants)
└── calculator.js (Main logic)
This provides a good balance between organization and simplicity,
making the codebase easier to maintain without over-modularization.
- Split 3470-line iframe.html into manageable components
- Created src/ directory with styles.css, template.html, calculator.js
- Updated build.js to assemble from modular source files
- Maintains identical functionality with improved maintainability
- Single source of truth: edit in src/, run build.js to generate both outputs
Fixed the build script to properly handle data-theme and data-scale attributes:
- Remove duplicate theme/scale assignments that were overriding options
- Apply theme classes to correct element (#dogCalculator)
- Support all three themes: light, dark, system
- Remove duplicate applyTheme/applyScale calls in init method
