@@ -1936,7 +2139,7 @@
Calculate amounts for
- day :
+ day :
Please enter a valid number of days (minimum 1)
@@ -2049,6 +2252,8 @@ const CALCULATOR_CONFIG = {
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
this.foodSources = [];
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
+ this.mealsPerDay = 2;
+ this.showPerMeal = false;
this.init();
}
@@ -2803,6 +3008,58 @@ const CALCULATOR_CONFIG = {
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
+ // Feeding configuration event listeners
+ const showDaily = document.getElementById('showDaily');
+ const showPerMeal = document.getElementById('showPerMeal');
+ const mealsPerDayInput = document.getElementById('mealsPerDay');
+ const mealInputGroup = document.getElementById('mealInputGroup');
+
+ if (showDaily) {
+ showDaily.addEventListener('change', () => {
+ if (showDaily.checked) {
+ this.showPerMeal = false;
+ if (mealInputGroup) mealInputGroup.style.display = 'none';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (showPerMeal) {
+ showPerMeal.addEventListener('change', () => {
+ if (showPerMeal.checked) {
+ this.showPerMeal = true;
+ if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (mealsPerDayInput) {
+ mealsPerDayInput.addEventListener('input', () => {
+ const meals = parseInt(mealsPerDayInput.value);
+ if (meals && meals >= 1 && meals <= 10) {
+ this.mealsPerDay = meals;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+
+ mealsPerDayInput.addEventListener('blur', () => {
+ if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
+ mealsPerDayInput.value = 2;
+ this.mealsPerDay = 2;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+ }
+
// Modal event listeners
const shareBtn = document.getElementById('shareBtn');
const embedBtn = document.getElementById('embedBtn');
@@ -3021,10 +3278,21 @@ const CALCULATOR_CONFIG = {
updateDayLabel() {
const days = document.getElementById('days')?.value;
const dayLabel = document.getElementById('dayLabel');
+ const mealNote = document.getElementById('mealNote');
if (dayLabel && days) {
const numDays = parseInt(days);
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
}
+ if (mealNote) {
+ if (this.showPerMeal && days) {
+ const numDays = parseInt(days);
+ const totalMeals = numDays * this.mealsPerDay;
+ mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
+ mealNote.style.display = 'inline';
+ } else {
+ mealNote.style.display = 'none';
+ }
+ }
}
setActiveUnitButton(unit) {
@@ -3091,6 +3359,7 @@ const CALCULATOR_CONFIG = {
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
const foodBreakdownList = document.getElementById('foodBreakdownList');
+ const feedingConfig = document.getElementById('feedingConfig');
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
@@ -3101,6 +3370,9 @@ const CALCULATOR_CONFIG = {
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ // Determine frequency suffix for display
+ const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
+
// Clear all food source errors first
this.foodSources.forEach(fs => {
this.showError(`energy-error-${fs.id}`, false);
@@ -3113,6 +3385,7 @@ const CALCULATOR_CONFIG = {
foodAmountsSection.style.display = 'none';
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when validation fails
const unitButtons = document.getElementById('unitButtons');
@@ -3134,11 +3407,17 @@ const CALCULATOR_CONFIG = {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ // Calculate per-meal amounts if needed
+ const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
+
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
+ displayGrams: displayGrams,
calories: dailyCaloriesForThisFood,
+ displayCalories: displayCalories,
isLocked: fs.isLocked,
hasEnergyContent: true
});
@@ -3151,7 +3430,9 @@ const CALCULATOR_CONFIG = {
name: fs.name,
percentage: fs.percentage,
dailyGrams: 0,
+ displayGrams: 0,
calories: 0,
+ displayCalories: 0,
isLocked: fs.isLocked,
hasEnergyContent: false
});
@@ -3169,6 +3450,7 @@ const CALCULATOR_CONFIG = {
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when no valid foods
const unitButtons = document.getElementById('unitButtons');
@@ -3215,6 +3497,9 @@ const CALCULATOR_CONFIG = {
// Update daily food results (total) - will be updated with proper units later
dailyFoodResults.style.display = 'block';
+ // Show feeding configuration when we have valid foods
+ if (feedingConfig) feedingConfig.style.display = 'block';
+
// Show unit buttons when daily results are shown
const unitButtons = document.getElementById('unitButtons');
if (unitButtons) unitButtons.style.display = 'flex';
@@ -3223,7 +3508,7 @@ const CALCULATOR_CONFIG = {
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
+ ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
: `⚠️ `;
return `
@@ -3243,8 +3528,9 @@ const CALCULATOR_CONFIG = {
// Generate individual food amount breakdown
// Update daily food value with correct units
- const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
+ const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
+ const convertedTotal = this.convertUnits(displayTotal, unit);
+ dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3265,7 +3551,11 @@ const CALCULATOR_CONFIG = {
`;
} else {
- const totalGramsForDays = breakdown.dailyGrams * numDays;
+ // For multi-day calculations: show total amount for all days
+ // But if in per-meal mode, multiply by meals per day as well
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
return `
diff --git a/src/css/main.css b/src/css/main.css
index 153947f..ada69e7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -437,4 +437,102 @@
}
}
+ /* Feeding Configuration Styles */
+ .dog-calculator-container .dog-calculator-feeding-config {
+ margin-top: 20px;
+ padding: 16px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ }
+
+ .dog-calculator-container .dog-calculator-frequency-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-wrap: wrap;
+ }
+
+ .dog-calculator-container .dog-calculator-frequency-row > label {
+ font-weight: 500;
+ color: var(--text-label);
+ margin: 0;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group label {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ color: var(--text-primary);
+ font-size: 0.95rem;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+ cursor: pointer;
+ margin: 0;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+ font-weight: 600;
+ color: var(--accent-color);
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0 auto;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ font-size: 0.95rem;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+ width: 50px;
+ padding: 4px 8px;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ font-size: 0.95rem;
+ color: var(--text-primary);
+ background: var(--bg-secondary);
+ text-align: center;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+ }
+
+ /* Update meal note styling */
+ .dog-calculator-container #mealNote {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ font-weight: normal;
+ margin-left: 4px;
+ }
+
+ /* Mobile responsive adjustments for feeding config */
+ @media (max-width: 480px) {
+ .dog-calculator-meal-input {
+ margin-left: 0;
+ width: 100%;
+ margin-top: 8px;
+ }
+
+ .dog-calculator-frequency-row {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+
/* Dark theme - manual override */
diff --git a/src/css/themes.css b/src/css/themes.css
index 02ab12b..588201e 100644
--- a/src/css/themes.css
+++ b/src/css/themes.css
@@ -1,9 +1,13 @@
.dog-calculator-container.theme-dark {
--bg-primary: #24202d;
--bg-secondary: #312b3b;
+ --bg-tertiary: #1f1b26;
--border-color: #433c4f;
--text-primary: #f5f3f7;
--text-secondary: #b8b0c2;
+ --text-label: #9f94ae;
+ --success-color: #7fa464;
+ --error-color: #e87159;
color: var(--text-primary);
}
@@ -148,14 +152,55 @@
color: var(--success-color);
}
+ /* Dark theme feeding configuration styles */
+ .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
+ background: var(--bg-tertiary);
+ border-color: var(--border-color);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
+ color: var(--text-label);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-radio-group label {
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
+ color: #f19a5f;
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
+ background: var(--bg-secondary);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
+ border-color: #f19a5f;
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+ }
+
+ .dog-calculator-container.theme-dark #mealNote {
+ color: var(--text-secondary);
+ }
+
/* System theme - follows user's OS preference */
@media (prefers-color-scheme: dark) {
.dog-calculator-container.theme-system {
--bg-primary: #24202d;
--bg-secondary: #312b3b;
+ --bg-tertiary: #1f1b26;
--border-color: #433c4f;
--text-primary: #f5f3f7;
--text-secondary: #b8b0c2;
+ --text-label: #9f94ae;
+ --success-color: #7fa464;
+ --error-color: #e87159;
color: var(--text-primary);
}
@@ -299,6 +344,43 @@
border-color: var(--success-color);
color: var(--success-color);
}
+
+ /* System theme feeding configuration styles in dark mode */
+ .dog-calculator-container.theme-system .dog-calculator-feeding-config {
+ background: var(--bg-tertiary);
+ border-color: var(--border-color);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
+ color: var(--text-label);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-radio-group label {
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
+ color: #f19a5f;
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
+ background: var(--bg-secondary);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
+ border-color: #f19a5f;
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+ }
+
+ .dog-calculator-container.theme-system #mealNote {
+ color: var(--text-secondary);
+ }
}
/* Modal Styles */
diff --git a/src/index.html b/src/index.html
index e147178..77a5ebe 100644
--- a/src/index.html
+++ b/src/index.html
@@ -65,6 +65,28 @@
Add another food source
+
+
+
@@ -100,7 +122,7 @@
Calculate amounts for
- day :
+ day :
Please enter a valid number of days (minimum 1)
diff --git a/src/js/calculator.js b/src/js/calculator.js
index 1101508..e75ac69 100644
--- a/src/js/calculator.js
+++ b/src/js/calculator.js
@@ -11,6 +11,8 @@
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
this.foodSources = [];
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
+ this.mealsPerDay = 2;
+ this.showPerMeal = false;
this.init();
}
@@ -765,6 +767,58 @@
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
+ // Feeding configuration event listeners
+ const showDaily = document.getElementById('showDaily');
+ const showPerMeal = document.getElementById('showPerMeal');
+ const mealsPerDayInput = document.getElementById('mealsPerDay');
+ const mealInputGroup = document.getElementById('mealInputGroup');
+
+ if (showDaily) {
+ showDaily.addEventListener('change', () => {
+ if (showDaily.checked) {
+ this.showPerMeal = false;
+ if (mealInputGroup) mealInputGroup.style.display = 'none';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (showPerMeal) {
+ showPerMeal.addEventListener('change', () => {
+ if (showPerMeal.checked) {
+ this.showPerMeal = true;
+ if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (mealsPerDayInput) {
+ mealsPerDayInput.addEventListener('input', () => {
+ const meals = parseInt(mealsPerDayInput.value);
+ if (meals && meals >= 1 && meals <= 10) {
+ this.mealsPerDay = meals;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+
+ mealsPerDayInput.addEventListener('blur', () => {
+ if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
+ mealsPerDayInput.value = 2;
+ this.mealsPerDay = 2;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+ }
+
// Modal event listeners
const shareBtn = document.getElementById('shareBtn');
const embedBtn = document.getElementById('embedBtn');
@@ -983,10 +1037,21 @@
updateDayLabel() {
const days = document.getElementById('days')?.value;
const dayLabel = document.getElementById('dayLabel');
+ const mealNote = document.getElementById('mealNote');
if (dayLabel && days) {
const numDays = parseInt(days);
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
}
+ if (mealNote) {
+ if (this.showPerMeal && days) {
+ const numDays = parseInt(days);
+ const totalMeals = numDays * this.mealsPerDay;
+ mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
+ mealNote.style.display = 'inline';
+ } else {
+ mealNote.style.display = 'none';
+ }
+ }
}
setActiveUnitButton(unit) {
@@ -1053,6 +1118,7 @@
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
const foodBreakdownList = document.getElementById('foodBreakdownList');
+ const feedingConfig = document.getElementById('feedingConfig');
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
@@ -1063,6 +1129,9 @@
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ // Determine frequency suffix for display
+ const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
+
// Clear all food source errors first
this.foodSources.forEach(fs => {
this.showError(`energy-error-${fs.id}`, false);
@@ -1075,6 +1144,7 @@
foodAmountsSection.style.display = 'none';
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when validation fails
const unitButtons = document.getElementById('unitButtons');
@@ -1096,11 +1166,17 @@
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ // Calculate per-meal amounts if needed
+ const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
+
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
+ displayGrams: displayGrams,
calories: dailyCaloriesForThisFood,
+ displayCalories: displayCalories,
isLocked: fs.isLocked,
hasEnergyContent: true
});
@@ -1113,7 +1189,9 @@
name: fs.name,
percentage: fs.percentage,
dailyGrams: 0,
+ displayGrams: 0,
calories: 0,
+ displayCalories: 0,
isLocked: fs.isLocked,
hasEnergyContent: false
});
@@ -1131,6 +1209,7 @@
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when no valid foods
const unitButtons = document.getElementById('unitButtons');
@@ -1177,6 +1256,9 @@
// Update daily food results (total) - will be updated with proper units later
dailyFoodResults.style.display = 'block';
+ // Show feeding configuration when we have valid foods
+ if (feedingConfig) feedingConfig.style.display = 'block';
+
// Show unit buttons when daily results are shown
const unitButtons = document.getElementById('unitButtons');
if (unitButtons) unitButtons.style.display = 'flex';
@@ -1185,7 +1267,7 @@
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
+ ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
: `⚠️ `;
return `
@@ -1205,8 +1287,9 @@
// Generate individual food amount breakdown
// Update daily food value with correct units
- const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
+ const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
+ const convertedTotal = this.convertUnits(displayTotal, unit);
+ dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -1227,7 +1310,11 @@
`;
} else {
- const totalGramsForDays = breakdown.dailyGrams * numDays;
+ // For multi-day calculations: show total amount for all days
+ // But if in per-meal mode, multiply by meals per day as well
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
return `
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index d0b8953..e713eb5 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -462,14 +462,117 @@
}
}
+ /* Feeding Configuration Styles */
+ .dog-calculator-container .dog-calculator-feeding-config {
+ margin-top: 20px;
+ padding: 16px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ }
+
+ .dog-calculator-container .dog-calculator-frequency-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-wrap: wrap;
+ }
+
+ .dog-calculator-container .dog-calculator-frequency-row > label {
+ font-weight: 500;
+ color: var(--text-label);
+ margin: 0;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group label {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ color: var(--text-primary);
+ font-size: 0.95rem;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+ cursor: pointer;
+ margin: 0;
+ }
+
+ .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+ font-weight: 600;
+ color: var(--accent-color);
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ margin-left: auto;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ font-size: 0.95rem;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+ width: 50px;
+ padding: 4px 8px;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ font-size: 0.95rem;
+ color: var(--text-primary);
+ background: var(--bg-secondary);
+ text-align: center;
+ }
+
+ .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+ }
+
+ /* Update meal note styling */
+ .dog-calculator-container #mealNote {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ font-weight: normal;
+ margin-left: 4px;
+ }
+
+ /* Mobile responsive adjustments for feeding config */
+ @media (max-width: 480px) {
+ .dog-calculator-meal-input {
+ margin-left: 0;
+ width: 100%;
+ margin-top: 8px;
+ }
+
+ .dog-calculator-frequency-row {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+
/* Dark theme - manual override */
.dog-calculator-container.theme-dark {
--bg-primary: #24202d;
--bg-secondary: #312b3b;
+ --bg-tertiary: #1f1b26;
--border-color: #433c4f;
--text-primary: #f5f3f7;
--text-secondary: #b8b0c2;
+ --text-label: #9f94ae;
+ --success-color: #7fa464;
+ --error-color: #e87159;
color: var(--text-primary);
}
@@ -614,14 +717,55 @@
color: var(--success-color);
}
+ /* Dark theme feeding configuration styles */
+ .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
+ background: var(--bg-tertiary);
+ border-color: var(--border-color);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
+ color: var(--text-label);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-radio-group label {
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
+ color: #f19a5f;
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
+ background: var(--bg-secondary);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
+ border-color: #f19a5f;
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+ }
+
+ .dog-calculator-container.theme-dark #mealNote {
+ color: var(--text-secondary);
+ }
+
/* System theme - follows user's OS preference */
@media (prefers-color-scheme: dark) {
.dog-calculator-container.theme-system {
--bg-primary: #24202d;
--bg-secondary: #312b3b;
+ --bg-tertiary: #1f1b26;
--border-color: #433c4f;
--text-primary: #f5f3f7;
--text-secondary: #b8b0c2;
+ --text-label: #9f94ae;
+ --success-color: #7fa464;
+ --error-color: #e87159;
color: var(--text-primary);
}
@@ -765,6 +909,43 @@
border-color: var(--success-color);
color: var(--success-color);
}
+
+ /* System theme feeding configuration styles in dark mode */
+ .dog-calculator-container.theme-system .dog-calculator-feeding-config {
+ background: var(--bg-tertiary);
+ border-color: var(--border-color);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
+ color: var(--text-label);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-radio-group label {
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
+ color: #f19a5f;
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input span {
+ color: var(--text-secondary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
+ background: var(--bg-secondary);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+ }
+
+ .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
+ border-color: #f19a5f;
+ box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+ }
+
+ .dog-calculator-container.theme-system #mealNote {
+ color: var(--text-secondary);
+ }
}
/* Modal Styles */
@@ -1890,6 +2071,8 @@ const CALCULATOR_CONFIG = {
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
this.foodSources = [];
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
+ this.mealsPerDay = 2;
+ this.showPerMeal = false;
this.init();
}
@@ -1962,6 +2145,28 @@ const CALCULATOR_CONFIG = {
Add another food source
+
+
+
@@ -1997,7 +2202,7 @@ const CALCULATOR_CONFIG = {
Calculate amounts for
- day :
+ day :
Please enter a valid number of days (minimum 1)
@@ -2840,6 +3045,58 @@ const CALCULATOR_CONFIG = {
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
+ // Feeding configuration event listeners
+ const showDaily = this.container.querySelector('#showDaily');
+ const showPerMeal = this.container.querySelector('#showPerMeal');
+ const mealsPerDayInput = this.container.querySelector('#mealsPerDay');
+ const mealInputGroup = this.container.querySelector('#mealInputGroup');
+
+ if (showDaily) {
+ showDaily.addEventListener('change', () => {
+ if (showDaily.checked) {
+ this.showPerMeal = false;
+ if (mealInputGroup) mealInputGroup.style.display = 'none';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (showPerMeal) {
+ showPerMeal.addEventListener('change', () => {
+ if (showPerMeal.checked) {
+ this.showPerMeal = true;
+ if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ });
+ }
+
+ if (mealsPerDayInput) {
+ mealsPerDayInput.addEventListener('input', () => {
+ const meals = parseInt(mealsPerDayInput.value);
+ if (meals && meals >= 1 && meals <= 10) {
+ this.mealsPerDay = meals;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+
+ mealsPerDayInput.addEventListener('blur', () => {
+ if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
+ mealsPerDayInput.value = 2;
+ this.mealsPerDay = 2;
+ if (this.showPerMeal) {
+ this.updateDayLabel();
+ this.updateFoodCalculations();
+ }
+ }
+ });
+ }
+
// Modal event listeners
const shareBtn = this.container.querySelector('#shareBtn');
const embedBtn = this.container.querySelector('#embedBtn');
@@ -3058,10 +3315,21 @@ const CALCULATOR_CONFIG = {
updateDayLabel() {
const days = this.container.querySelector('#days')?.value;
const dayLabel = this.container.querySelector('#dayLabel');
+ const mealNote = this.container.querySelector('#mealNote');
if (dayLabel && days) {
const numDays = parseInt(days);
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
}
+ if (mealNote) {
+ if (this.showPerMeal && days) {
+ const numDays = parseInt(days);
+ const totalMeals = numDays * this.mealsPerDay;
+ mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
+ mealNote.style.display = 'inline';
+ } else {
+ mealNote.style.display = 'none';
+ }
+ }
}
setActiveUnitButton(unit) {
@@ -3128,6 +3396,7 @@ const CALCULATOR_CONFIG = {
const totalAmountDisplay = this.container.querySelector('#totalAmountDisplay');
const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
+ const feedingConfig = this.container.querySelector('#feedingConfig');
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
return;
@@ -3138,6 +3407,9 @@ const CALCULATOR_CONFIG = {
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+ // Determine frequency suffix for display
+ const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
+
// Clear all food source errors first
this.foodSources.forEach(fs => {
this.showError(`energy-error-${fs.id}`, false);
@@ -3150,6 +3422,7 @@ const CALCULATOR_CONFIG = {
foodAmountsSection.style.display = 'none';
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when validation fails
const unitButtons = this.container.querySelector('#unitButtons');
@@ -3171,11 +3444,17 @@ const CALCULATOR_CONFIG = {
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+ // Calculate per-meal amounts if needed
+ const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+ const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
+
foodBreakdowns.push({
name: fs.name,
percentage: fs.percentage,
dailyGrams: dailyGramsForThisFood,
+ displayGrams: displayGrams,
calories: dailyCaloriesForThisFood,
+ displayCalories: displayCalories,
isLocked: fs.isLocked,
hasEnergyContent: true
});
@@ -3188,7 +3467,9 @@ const CALCULATOR_CONFIG = {
name: fs.name,
percentage: fs.percentage,
dailyGrams: 0,
+ displayGrams: 0,
calories: 0,
+ displayCalories: 0,
isLocked: fs.isLocked,
hasEnergyContent: false
});
@@ -3206,6 +3487,7 @@ const CALCULATOR_CONFIG = {
dailyFoodResults.style.display = 'none';
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+ if (feedingConfig) feedingConfig.style.display = 'none';
// Hide unit buttons when no valid foods
const unitButtons = this.container.querySelector('#unitButtons');
@@ -3252,6 +3534,9 @@ const CALCULATOR_CONFIG = {
// Update daily food results (total) - will be updated with proper units later
dailyFoodResults.style.display = 'block';
+ // Show feeding configuration when we have valid foods
+ if (feedingConfig) feedingConfig.style.display = 'block';
+
// Show unit buttons when daily results are shown
const unitButtons = this.container.querySelector('#unitButtons');
if (unitButtons) unitButtons.style.display = 'flex';
@@ -3260,7 +3545,7 @@ const CALCULATOR_CONFIG = {
if (foodBreakdownList && foodBreakdowns.length > 1) {
const breakdownHTML = foodBreakdowns.map(breakdown => {
const valueContent = breakdown.hasEnergyContent
- ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
+ ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
: `⚠️ `;
return `
@@ -3280,8 +3565,9 @@ const CALCULATOR_CONFIG = {
// Generate individual food amount breakdown
// Update daily food value with correct units
- const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
- dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
+ const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
+ const convertedTotal = this.convertUnits(displayTotal, unit);
+ dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
// Build HTML for individual food amounts
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3302,7 +3588,11 @@ const CALCULATOR_CONFIG = {
`;
} else {
- const totalGramsForDays = breakdown.dailyGrams * numDays;
+ // For multi-day calculations: show total amount for all days
+ // But if in per-meal mode, multiply by meals per day as well
+ const totalGramsForDays = this.showPerMeal
+ ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+ : breakdown.dailyGrams * numDays;
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
return `