diff --git a/dog-food-calculator-widget.js b/dog-food-calculator-widget.js index e6c94f5..1051a8d 100644 --- a/dog-food-calculator-widget.js +++ b/dog-food-calculator-widget.js @@ -32,20 +32,93 @@ .dog-calc-section { background: #fdfcfe; border: 1px solid #e8e3ed; - border-radius: 8px; + border-radius: 8px 8px 0 0; padding: 24px; - margin-bottom: 24px; + margin-bottom: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } - .dog-calc-section h2 { - margin-top: 0; + .dog-calc-section-header { + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 24px; + flex-wrap: wrap; + gap: 16px; + } + + .dog-calc-section h2 { + margin: 0; color: #6f3f6d; font-size: 1.5rem; font-weight: 600; } + /* Unit Switch */ + .dog-calc-unit-switch { + display: flex; + align-items: center; + gap: 12px; + } + + .dog-calc-unit-label { + font-size: 0.9rem; + font-weight: 500; + color: #635870; + transition: color 0.2s ease; + } + + .dog-calc-unit-label.active { + color: #6f3f6d; + font-weight: 600; + } + + .dog-calc-switch { + position: relative; + display: inline-block; + width: 48px; + height: 24px; + } + + .dog-calc-switch input { + opacity: 0; + width: 0; + height: 0; + } + + .dog-calc-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #e8e3ed; + transition: 0.3s; + border-radius: 24px; + } + + .dog-calc-slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.3s; + border-radius: 50%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + .dog-calc-switch input:checked + .dog-calc-slider { + background-color: #f19a5f; + } + + .dog-calc-switch input:checked + .dog-calc-slider:before { + transform: translateX(24px); + } + .dog-calc-form-group { margin-bottom: 20px; } @@ -143,8 +216,8 @@ .dog-calc-collapsible { background: #ffffff; border: 1px solid #e8e3ed; - border-radius: 8px; - margin-bottom: 24px; + border-top: none; + margin-bottom: 0; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } @@ -152,17 +225,7 @@ .dog-calc-collapsible-header { background: #f8f5fa; padding: 20px 24px; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; border-bottom: 1px solid #e8e3ed; - transition: background-color 0.2s ease; - } - - .dog-calc-collapsible-header:hover { - background: #f5f1f6; } .dog-calc-collapsible-header h3 { @@ -172,30 +235,57 @@ font-weight: 600; } - .dog-calc-collapsible-arrow { - transition: transform 0.2s ease; - font-size: 1.2rem; - color: #9f5999; - } - - .dog-calc-collapsible.active .dog-calc-collapsible-arrow { - transform: rotate(180deg); - } - .dog-calc-collapsible-content { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; - } - - .dog-calc-collapsible.active .dog-calc-collapsible-content { - max-height: 1000px; + display: block; } .dog-calc-collapsible-inner { padding: 24px; } + /* Action Buttons */ + .dog-calc-action-buttons { + display: flex; + justify-content: center; + gap: 16px; + padding: 20px; + background: #f8f5fa; + border-left: 1px solid #e8e3ed; + border-right: 1px solid #e8e3ed; + margin-top: -1px; + } + + .dog-calc-btn { + padding: 8px 16px; + border: 1px solid #e8e3ed; + border-radius: 6px; + font-size: 0.9rem; + font-weight: 500; + font-family: inherit; + cursor: pointer; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + gap: 6px; + background: white; + color: #6f3f6d; + } + + .dog-calc-btn:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .dog-calc-btn-share:hover { + border-color: #9f5999; + color: #9f5999; + } + + .dog-calc-btn-embed:hover { + border-color: #7fa464; + color: #7fa464; + } + .dog-calc-input-group { display: flex; gap: 16px; @@ -224,9 +314,12 @@ .dog-calc-footer { text-align: center; - padding: 16px 0; - border-top: 1px solid #e8e3ed; - margin-top: 24px; + padding: 20px; + background: #fdfcfe; + border: 1px solid #e8e3ed; + border-radius: 0 0 8px 8px; + border-top: none; + margin-top: -1px; } .dog-calc-footer a { @@ -280,6 +373,30 @@ .dog-calc-collapsible-header { padding: 16px 20px; } + + .dog-calc-section-header { + flex-direction: column; + align-items: stretch; + gap: 12px; + } + + .dog-calc-section h2 { + text-align: center; + } + + .dog-calc-unit-switch { + justify-content: center; + } + + .dog-calc-action-buttons { + flex-direction: column; + padding: 16px; + } + + .dog-calc-btn { + width: 100%; + justify-content: center; + } } @media (prefers-color-scheme: dark) { @@ -346,8 +463,47 @@ } .dog-calc-footer { + background: #24202d; border-color: #433c4f; } + + .dog-calc-unit-label { + color: #b8b0c2; + } + + .dog-calc-unit-label.active { + color: #f5f3f7; + } + + .dog-calc-slider { + background-color: #433c4f; + } + + .dog-calc-action-buttons { + background: #312b3b; + border-color: #433c4f; + } + + .dog-calc-btn { + background: #433c4f; + border-color: #433c4f; + color: #f5f3f7; + } + + .dog-calc-btn:hover { + background: #524a5f; + border-color: #524a5f; + } + + .dog-calc-btn-share:hover { + border-color: #9f5999; + color: #f19a5f; + } + + .dog-calc-btn-embed:hover { + border-color: #7fa464; + color: #7fa464; + } } `; @@ -355,7 +511,17 @@ const widgetTemplate = `
-

Dog's Characteristics

+
+

Dog's Characteristics

+
+ Metric + + Imperial +
+
@@ -376,7 +542,7 @@
- +
Please enter a valid weight (minimum 0.1 kg)
@@ -393,15 +559,14 @@
-
+
-

How much food is that?

- ▼ +

How much should I feed?

- +
Please enter a valid energy content (minimum 1 kcal/100g)
@@ -438,6 +603,15 @@
+
+ + +
+
by caninenutritionandwellness.com @@ -451,6 +625,7 @@ constructor(container) { this.container = container; this.currentMER = 0; + this.isImperial = false; this.init(); } @@ -458,6 +633,7 @@ this.injectStyles(); this.injectHTML(); this.bindEvents(); + this.updateUnitLabels(); } injectStyles() { @@ -479,7 +655,7 @@ const foodEnergyInput = this.container.querySelector('#foodEnergy'); const daysInput = this.container.querySelector('#days'); const unitSelect = this.container.querySelector('#unit'); - const collapsibleHeader = this.container.querySelector('.dog-calc-collapsible-header'); + const unitToggle = this.container.querySelector('#unitToggle'); if (weightInput) { weightInput.addEventListener('input', () => this.updateCalorieCalculations()); @@ -500,16 +676,122 @@ if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations()); - if (collapsibleHeader) { - collapsibleHeader.addEventListener('click', () => this.toggleCollapsible()); + if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits()); + } + + toggleUnits() { + const toggle = this.container.querySelector('#unitToggle'); + this.isImperial = toggle.checked; + + this.updateUnitLabels(); + this.convertExistingValues(); + this.updateCalorieCalculations(); + } + + updateUnitLabels() { + const metricLabel = this.container.querySelector('#metricLabel'); + const imperialLabel = this.container.querySelector('#imperialLabel'); + const weightLabel = this.container.querySelector('#weightLabel'); + const foodEnergyLabel = this.container.querySelector('#foodEnergyLabel'); + const weightInput = this.container.querySelector('#weight'); + const foodEnergyInput = this.container.querySelector('#foodEnergy'); + const unitSelect = this.container.querySelector('#unit'); + + if (metricLabel && imperialLabel) { + metricLabel.classList.toggle('active', !this.isImperial); + imperialLabel.classList.toggle('active', this.isImperial); + } + + if (this.isImperial) { + if (weightLabel) weightLabel.textContent = "Dog's Weight (lbs):"; + if (weightInput) { + weightInput.placeholder = "Enter weight in lbs"; + weightInput.min = "0.2"; + weightInput.step = "0.1"; + } + if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/oz):"; + if (foodEnergyInput) { + foodEnergyInput.placeholder = "Enter kcal per oz"; + foodEnergyInput.min = "0.03"; + foodEnergyInput.step = "0.01"; + } + if (unitSelect) { + unitSelect.innerHTML = ` + + + + + `; + } + } else { + if (weightLabel) weightLabel.textContent = "Dog's Weight (kg):"; + if (weightInput) { + weightInput.placeholder = "Enter weight in kg"; + weightInput.min = "0.1"; + weightInput.step = "0.1"; + } + if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/100g):"; + if (foodEnergyInput) { + foodEnergyInput.placeholder = "Enter kcal per 100g"; + foodEnergyInput.min = "1"; + foodEnergyInput.step = "1"; + } + if (unitSelect) { + unitSelect.innerHTML = ` + + + + + `; + } } } - toggleCollapsible() { - const collapsible = this.container.querySelector('.dog-calc-collapsible'); - if (collapsible) { - collapsible.classList.toggle('active'); + convertExistingValues() { + const weightInput = this.container.querySelector('#weight'); + const foodEnergyInput = this.container.querySelector('#foodEnergy'); + + if (weightInput && weightInput.value) { + const currentWeight = parseFloat(weightInput.value); + if (!isNaN(currentWeight)) { + if (this.isImperial) { + weightInput.value = this.formatNumber(currentWeight * 2.20462, 1); + } else { + weightInput.value = this.formatNumber(currentWeight / 2.20462, 1); + } + } } + + if (foodEnergyInput && foodEnergyInput.value) { + const currentEnergy = parseFloat(foodEnergyInput.value); + if (!isNaN(currentEnergy)) { + if (this.isImperial) { + foodEnergyInput.value = this.formatNumber(currentEnergy / 3.52739, 2); + } else { + foodEnergyInput.value = this.formatNumber(currentEnergy * 3.52739, 0); + } + } + } + } + + getWeightInKg() { + const weightInput = this.container.querySelector('#weight'); + if (!weightInput || !weightInput.value) return null; + + const weight = parseFloat(weightInput.value); + if (isNaN(weight)) return null; + + return this.isImperial ? weight / 2.20462 : weight; + } + + getFoodEnergyPer100g() { + const foodEnergyInput = this.container.querySelector('#foodEnergy'); + if (!foodEnergyInput || !foodEnergyInput.value) return null; + + const energy = parseFloat(foodEnergyInput.value); + if (isNaN(energy)) return null; + + return this.isImperial ? energy * 3.52739 : energy; } calculateRER(weightKg) { @@ -579,23 +861,23 @@ } updateCalorieCalculations() { - const weightInput = this.container.querySelector('#weight'); const dogTypeSelect = this.container.querySelector('#dogType'); const calorieResults = this.container.querySelector('#calorieResults'); const rerValue = this.container.querySelector('#rerValue'); const merValue = this.container.querySelector('#merValue'); - if (!weightInput || !dogTypeSelect || !calorieResults || !rerValue || !merValue) { + if (!dogTypeSelect || !calorieResults || !rerValue || !merValue) { return; } - const weight = weightInput.value; + const weightKg = this.getWeightInKg(); const dogTypeFactor = dogTypeSelect.value; this.showError('weightError', false); - if (!weight || !this.validateInput(weight, 0.1)) { - if (weight) this.showError('weightError', true); + if (!weightKg || weightKg < 0.1) { + const weightInput = this.container.querySelector('#weight'); + if (weightInput && weightInput.value) this.showError('weightError', true); calorieResults.style.display = 'none'; return; } @@ -605,7 +887,6 @@ return; } - const weightKg = parseFloat(weight); const factor = parseFloat(dogTypeFactor); const rer = this.calculateRER(weightKg); @@ -623,26 +904,26 @@ updateFoodCalculations() { if (this.currentMER === 0) return; - const foodEnergyInput = this.container.querySelector('#foodEnergy'); const daysInput = this.container.querySelector('#days'); const unitSelect = this.container.querySelector('#unit'); const dailyFoodResults = this.container.querySelector('#dailyFoodResults'); const dailyFoodValue = this.container.querySelector('#dailyFoodValue'); const totalFoodDisplay = this.container.querySelector('#totalFoodDisplay'); - if (!foodEnergyInput || !daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) { + if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) { return; } - const foodEnergy = foodEnergyInput.value; + const energyPer100g = this.getFoodEnergyPer100g(); const days = daysInput.value; const unit = unitSelect.value; this.showError('foodEnergyError', false); this.showError('daysError', false); - if (!foodEnergy || !this.validateInput(foodEnergy, 1)) { - if (foodEnergy) this.showError('foodEnergyError', true); + if (!energyPer100g || energyPer100g < 1) { + const foodEnergyInput = this.container.querySelector('#foodEnergy'); + if (foodEnergyInput && foodEnergyInput.value) this.showError('foodEnergyError', true); dailyFoodResults.style.display = 'none'; totalFoodDisplay.value = ''; return; @@ -654,7 +935,6 @@ return; } - const energyPer100g = parseFloat(foodEnergy); const numDays = parseInt(days); const dailyFoodGrams = (this.currentMER / energyPer100g) * 100;