dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add per-meal feeding frequency feature

Browse Source 
- 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.
This commit is contained in:
Dayowe
2025-08-18 12:45:44 +02:00
parent c7a4aa01ba
commit 8758ac1dbc
6 changed files with 884 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+23 -1
View File
@@ -65,6 +65,28 @@
<span>Add another food source</span>
</button>
<!-- Feeding Configuration -->
<div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
<div class="dog-calculator-frequency-row">
<label>Show amounts:</label>
<div class="dog-calculator-radio-group">
<label>
<input type="radio" name="showAs" value="daily" id="showDaily" checked>
<span>Per day</span>
</label>
<label>
<input type="radio" name="showAs" value="meal" id="showPerMeal">
<span>Per meal</span>
</label>
</div>
<div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
<span>×</span>
<input type="number" id="mealsPerDay" value="2" min="1" max="10">
<span>meals/day</span>
</div>
</div>
</div>
<!-- Per-Food Results -->
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
<div id="foodBreakdownList">
@@ -100,7 +122,7 @@
<h4 class="dog-calculator-section-title">
Calculate amounts for
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
<span id="dayLabel">day</span>:
<span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
</h4>
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">