A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Features advanced multi-food source management, percentage locking, and detailed food amount breakdowns. Distributed as a standalone page; third‑party embedding is no longer supported.

By Canine Nutrition and Wellness

✨ Features

Core Calculation Features

Accurate Calculations: Uses veterinary-standard RER formula: 70 × (weight in kg)^0.75
Multiple Activity Levels: 11 different dog types and activity factors
Multi-Region Support: kcal/100g (EU/UK), kcal/kg, kcal/cup, kcal/can (US/Canada)
Unit Conversion: Automatic conversion to grams/kg/oz/lb for food amounts
Smart Unit Selection: Auto-selects grams for metric and ounces for imperial systems
Unit Selection Buttons: Intuitive button interface for choosing display units (g/kg/oz/lb)

Multi-Food Source Management

Multiple Food Sources: Add up to 5 different food sources per diet plan
Percentage System: Distribute diet percentages across multiple foods with real-time validation
Percentage Locking: Lock specific food source percentages to maintain fixed ratios
Smart Redistribution: Automatic percentage rebalancing when sources are added/removed
Editable Food Names: Click-to-edit food source names (e.g., "Morning Kibble", "Evening Wet Food")

Food Amount Breakdown

Individual Food Amounts: See exact amounts needed for each food source
Per-Food Calculations: Calculate specific quantities for different food types
Total Summary: Combined totals with clear breakdown by food source
Lock Indicators: Visual indicators showing which percentages are locked

User Experience

Scalable UI: Resize from 50% to 200% via query params
Theme Support: Light, dark, and system themes
Responsive Design: Mobile-first, optimized layouts for all devices
Accessibility: Full keyboard navigation and screen reader support

Brand & Integration

Brand Integration: Uses Canine Nutrition and Wellness color scheme
Professional Design: Clean, veterinary-grade interface
Brand Protection: Complete iframe isolation option

🚀 Usage

Open iframe.html locally, or host it as a standalone page on your site.
Embedding is allowed only on these domains: caninenutritionandwellness.com, www.caninenutritionandwellness.com.
Use an iframe to embed on your site, for example:

<iframe 
  src="https://embed.caninenutritionandwellness.com/dog-calorie-calculator/iframe.html?theme=light&scale=0.8"
  width="100%" height="640" frameborder="0" title="Dog Calorie Calculator">
</iframe>

🍽️ Multi-Food Source Usage

The calculator supports complex feeding plans with multiple food sources, perfect for mixed diets combining dry food, wet food, treats, and supplements.

Basic Multi-Food Workflow

Start with one food source - Calculator begins with a single "Food Source 1"
Add more sources - Click "Add another food source" (up to 5 total)
Customize names - Click any food source name to edit (e.g., "Morning Kibble", "Evening Wet Food")
Set energy content - Enter kcal values and select appropriate units for each food
Adjust percentages - Use sliders or input fields to distribute diet percentages
Lock percentages - Click 🔒 to lock specific food source percentages
Get individual amounts - See exact quantities needed for each food source

Percentage System Features

Real-time Validation: Percentages always total exactly 100%
Smart Redistribution: When you change one percentage, others adjust automatically
Percentage Locking: Lock specific sources to maintain fixed ratios
Visual Feedback: Lock indicators show which percentages are fixed
Bulletproof Logic: Prevents impossible states (negative percentages, >100% totals)

Example Usage Scenarios

Mixed Diet Example:

Royal Canin Dry Food    → 70% (locked)
Blue Buffalo Wet Food   → 25%
Training Treats         → 5%

Meal-Based Planning:

Morning Kibble          → 50%
Evening Wet Food        → 30%
Midday Snacks          → 20%

Transition Diet:

Old Food (reducing)     → 25%
New Food (increasing)   → 75% (locked)

Food Amount Breakdown

The calculator provides detailed breakdowns showing:

Individual amounts for each food source
Percentage distribution with visual indicators
Lock status for each food source
Total combined amount for the specified number of days
Unit conversion (grams, kg, oz, lb) for all amounts

⚙️ Configuration Options

Theme Options

Choose from three themes:

light - Light theme
dark - Dark theme
system - Follows user's OS preference (default)

Scale Options

Resize the interface from 50% to 200%:

Range: 0.5 to 2.0
Default: 1.0 (100% size)
Examples: 0.8 (80%), 1.2 (120%), 1.5 (150%)

Food Energy Units

Support for regional differences:

kcal/100g - European/UK standard (default)
kcal/kg - North American standard
kcal/cup - US/Canada dry food
kcal/can - US/Canada wet food

🛠️ Development

Build System

This project uses an organized source layout compiled into a single page:

Sources: src/ (HTML, CSS, JS modules)
Build Script: build.js - Generates iframe.html from src/
Output: iframe.html - Standalone calculator page

Development Workflow

Make changes in src/ - Edit calculations, design, layout, or functionality
Run the build script: node build.js
Done! - iframe.html is regenerated

Why This Approach?

✅ Single Source of Truth - No need to maintain two separate files
✅ Identical Functionality - Widget matches iframe exactly
✅ Easy Maintenance - Edit once, deploy everywhere
✅ No Sync Issues - Build script ensures consistency

Build Script Features

Compiles CSS, HTML, and JavaScript from src/
Preserves all functionality including unit switching and calculations
Maintains theme and scale support via URL query parameters

📁 Project Structure

├── src/                          # ✏️ Source (HTML/CSS/JS)
├── build.js                      # 🔧 Build script - Run after changes
├── iframe.html                   # 📦 Generated standalone page
└── README.md                     # 📖 This file

🎨 Brand Integration

The calculator uses your brand's color system:

Primary: #f19a5f (Coral)
Secondary: #9f5999 (Purple)
Text: #6f3f6d (Deep Purple)
Backgrounds: Light purple tints
Font: Montserrat

Colors automatically adapt to light/dark themes via CSS custom properties.

📊 Dog Activity Factors

Dog Type	Factor	Use Case
Puppy (0-4 months)	3.0	Rapid growth phase
Puppy (4 months - adult)	2.0	Continued growth
Adult - inactive/obese	1.2	Weight management
Adult (neutered/spayed)	1.6	Typical house pet
Adult (intact)	1.8	Unaltered adult
Adult - weight loss	1.0	Calorie restriction
Adult - weight gain	1.7	Weight building
Working dog - light work	2.0	Light activity
Working dog - moderate work	3.0	Regular work
Working dog - heavy work	5.0	Intensive work
Senior dog	1.1	Reduced activity

🔧 Technical Notes

Standalone page with theme and scale controls via URL params.
Embedding is allowlisted at runtime to your domains and should be enforced with server headers.

Server Headers (required for robust enforcement)

Configure your server or CDN to send this header on iframe.html:

Content-Security-Policy: frame-ancestors https://caninenutritionandwellness.com https://www.caninenutritionandwellness.com;

Optional legacy header (deprecated but harmless as a supplement):

X-Frame-Options: SAMEORIGIN

If you serve the calculator from a subdomain (e.g., embed.caninenutritionandwellness.com) and embed it on the root domain, prefer the CSP frame-ancestors directive above.

🚀 Deployment Guide

Deployment

Host iframe.html (e.g., on embed.caninenutritionandwellness.com) and embed via iframe on your approved domains.

🔒 Brand Protection

Embedding is disabled to protect branding and ensure consistent presentation.

📱 Mobile Optimization

Responsive breakpoints: 576px (mobile), 850px (tablet)
Touch-friendly: Larger tap targets on mobile
Input optimization: Numeric keyboards for number inputs
Collapsible sections: Better mobile space utilization

🧪 Testing

Manual Testing Checklist

Core Functionality

All dog type selections work
Weight validation (minimum 0.1kg)
RER/MER calculations accurate
Unit conversions (g/kg/oz/lb) correct
Theme switching (light/dark/system)
Scale options (0.5x to 2.0x) work properly

Multi-Food Source Features

Add food sources (up to 5 maximum)
Remove food sources (minimum 1 maintained)
Edit food source names (click-to-edit functionality)
Food energy content validation per source
Food energy unit selector per source (kcal/100g, kcal/kg, kcal/cup, kcal/can)
Percentage slider adjustments work correctly
Percentage input field validation
Percentage locking/unlocking (🔒 icon)
Smart percentage redistribution when sources change
Total percentages always equal 100%
Individual food amount calculations
Food amount breakdown display
Add button states ("Add another food source" vs "Maximum 5 sources reached")

User Interface

Mobile responsive layout
Collapsible section toggles
Visual lock indicators display correctly
Percentage badges and styling
Branded footer link works
Box shadows consistent across all sections
Food source name alignment on mobile
Proper input field sizing on mobile

Browser Compatibility

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ Mobile Safari (iOS 14+)
✅ Chrome Mobile (Android 10+)

🤝 Contributing

This tool is maintained by Canine Nutrition and Wellness. For suggestions or issues:

Test the issue on the demo page
Provide specific browser/device information
Include steps to reproduce
Suggest improvements based on veterinary nutrition standards

📄 License

This calculator is provided for educational and professional use. The formulas are based on established veterinary nutrition standards. Always consult with a veterinary nutritionist for specific dietary recommendations.

🔗 Links

Website: caninenutritionandwellness.com
Standalone: Open iframe.html in your browser

Built with ❤️ for canine nutrition professionals

README.md Unescape Escape

🐕 Sundog Dog Food Calorie Calculator

✨ Features

Core Calculation Features

Multi-Food Source Management

Food Amount Breakdown

User Experience

Brand & Integration

🚀 Usage

🍽️ Multi-Food Source Usage

Basic Multi-Food Workflow

Percentage System Features

Example Usage Scenarios

Food Amount Breakdown

⚙️ Configuration Options

Theme Options

Scale Options

Food Energy Units

🛠️ Development

Build System

Development Workflow

Why This Approach?

Build Script Features

📁 Project Structure

🎨 Brand Integration

📊 Dog Activity Factors

🔧 Technical Notes

Server Headers (required for robust enforcement)

🚀 Deployment Guide

Deployment

🔒 Brand Protection

📱 Mobile Optimization

🧪 Testing

Manual Testing Checklist

Core Functionality

Multi-Food Source Features

User Interface

Browser Compatibility

🤝 Contributing

📄 License

🔗 Links

README.md