🐕 Sundog Dog Food Calorie Calculator

A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Built for embedding on websites with complete brand protection options.

By Canine Nutrition and Wellness

✨ 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)
• Food Amount Calculator: Converts calories to grams/kg/oz/lb of food
• Scalable Widget: Easily resize from 50% to 200% with data attributes
• Theme Support: Light, dark, and system themes
• Responsive Design: Mobile-first, works on all devices
• Brand Integration: Uses Canine Nutrition and Wellness color scheme
• Two Embedding Options: JavaScript widget and iframe
• Accessibility: Full keyboard navigation and screen reader support

🚀 Quick Start

Option 1: JavaScript Widget (Recommended)

<!-- Basic usage -->
<script src="https://yourdomain.com/sundog-dog-food-calculator.js"></script>
<div id="dog-calorie-calculator"></div>

<!-- With theme and scale options -->
<div id="dog-calorie-calculator" data-theme="dark" data-scale="0.8"></div>

Option 2: iframe Embed

<!-- Basic iframe -->
<iframe 
    src="https://yourdomain.com/iframe.html"
    width="100%" 
    height="600"
    frameborder="0"
    title="Dog Calorie Calculator">
</iframe>

<!-- With theme and scale parameters -->
<iframe 
    src="https://yourdomain.com/iframe.html?theme=dark&scale=1.2"
    width="100%" 
    height="600"
    frameborder="0"
    title="Dog Calorie Calculator">
</iframe>

⚙️ 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 widget 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

Advanced JavaScript Usage

new DogCalorieCalculatorWidget(container, {
    theme: 'dark',    // 'light', 'dark', 'system'
    scale: 1.2        // 0.5 to 2.0
});

🛠️ Development

Build System

This project uses a single source of truth approach:

• Master Source: iframe.html - Contains all functionality, styles, and calculations
• Build Script: build.js - Generates the widget from iframe.html
• Generated Output: sundog-dog-food-calculator.js - Embeddable widget

Development Workflow

1. Make changes to iframe.html - Edit calculations, design, layout, or functionality
2. Run the build script: node build.js
3. Done! - Both iframe and widget now have identical functionality

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

• Extracts CSS, HTML, and JavaScript from iframe.html
• Transforms CSS classes for widget namespacing (dog-calculator- → dog-calc-)
• Preserves all functionality including unit switching and calculations
• Maintains theme and scale support via data attributes

📁 Project Structure

├── iframe.html                    # 🎯 MASTER SOURCE - Edit this file
├── build.js                      # 🔧 Build script - Run after changes
├── sundog-dog-food-calculator.js  # 📦 Generated widget (don't edit)
├── test-widget.html              # 🧪 Test file for widget
└── 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 Implementation

JavaScript Widget Features

• Auto-initialization: Detects #dog-calorie-calculator containers
• CSS Namespacing: All classes prefixed with dog-calc-
• Shadow DOM Ready: Prepared for better style isolation
• Real-time Validation: Input validation with error messages
• Mobile Optimized: Responsive breakpoints and touch-friendly

iframe Features

• Auto-resize: Communicates height changes to parent
• Style Isolation: Complete protection from host site CSS
• Loading Animation: Smooth fade-in when ready
• Cross-origin Ready: PostMessage communication for integration

🚀 Deployment Guide

1. Host the Files

Upload these files to your web server:

• sundog-dog-food-calculator.js (for widget embedding)
• iframe.html (for iframe embedding)

2. Update URLs

Replace https://yourdomain.com in:

• test-widget.html examples
• sundog-dog-food-calculator.js comments
• This README

3. CDN Distribution (Optional)

For better performance, serve the widget script via CDN:

• Use CloudFlare, AWS CloudFront, or similar
• Enable CORS headers for cross-origin requests
• Set appropriate cache headers (1 day for updates)

4. Analytics Integration

Add tracking to understand usage:

// Track widget interactions
document.addEventListener('DOMContentLoaded', function() {
    // Track when calculator is used
    document.addEventListener('change', function(e) {
        if (e.target.closest('.dog-calc-widget')) {
            gtag('event', 'calculator_interaction', {
                'event_category': 'dog_calculator',
                'event_label': e.target.id
            });
        }
    });
});

🔒 Brand Protection

JavaScript Widget Risks

Users can override your styling with:

.dog-calc-footer { display: none !important; }

iframe Protection

Your branding is completely protected in iframe mode. Users cannot:

• Remove your footer link
• Modify your styling
• Access your content with JavaScript

📱 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

• All dog type selections work
• Weight validation (minimum 0.1kg)
• RER/MER calculations accurate
• Food energy unit selector (kcal/100g, kcal/kg, kcal/cup, kcal/can)
• Food energy validation (minimum values per unit)
• Unit conversions (g/kg/oz/lb) correct
• Theme switching (light/dark/system)
• Scale options (0.5x to 2.0x) work properly
• Collapsible section toggles
• Mobile responsive layout
• Branded footer link works
• Box shadows consistent across all sections

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:

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

📄 License

© 2024 Canine Nutrition and Wellness. All rights reserved.

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
• Demo: Open embed-demo.html in your browser
• Standalone: Open index.html in your browser

---

Built with ❤️ for canine nutrition professionals