- 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
