@jjlmoya/utils-health 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-health",
-    "version": "1.25.0",
+    "version": "1.26.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -21,10 +21,11 @@ import { epworthSleepinessScale } from '../tool/epworthSleepinessScale/entry';
 import { leanBodyMassCalculator } from '../tool/leanBodyMassCalculator/entry';
 import { metabolicAgeCalculator } from '../tool/metabolicAgeCalculator/entry';
 import { bunCreatinineCalculator } from '../tool/bunCreatinineCalculator/entry';
+import { targetHeightEstimator } from '../tool/targetHeightEstimator/entry';
 
 export const healthCategory: HealthCategoryEntry = {
   icon: 'mdi:heart-pulse',
-  tools: [bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
+  tools: [bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, targetHeightEstimator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -18,6 +18,7 @@ export { metabolicAgeCalculator } from './tool/metabolicAgeCalculator/entry';
 export { macronutrientCalculator } from './tool/macronutrientCalculator/entry';
 export { tdeeCalculator } from './tool/tdeeCalculator/entry';
 export { bunCreatinineCalculator } from './tool/bunCreatinineCalculator/entry';
+export { targetHeightEstimator } from './tool/targetHeightEstimator/entry';
 export { pelliRobsonTest } from './tool/pelliRobsonTest/entry';
 export { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 export { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
@@ -46,6 +47,7 @@ import { metabolicAgeCalculator } from './tool/metabolicAgeCalculator/entry';
 import { macronutrientCalculator } from './tool/macronutrientCalculator/entry';
 import { tdeeCalculator } from './tool/tdeeCalculator/entry';
 import { bunCreatinineCalculator } from './tool/bunCreatinineCalculator/entry';
+import { targetHeightEstimator } from './tool/targetHeightEstimator/entry';
 import { pelliRobsonTest } from './tool/pelliRobsonTest/entry';
 import { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 import { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
@@ -53,4 +55,4 @@ import { screenDecompressionTime } from './tool/screenDecompressionTime/entry';
 import { tinnitusReliever } from './tool/tinnitusReliever/entry';
 import { ubeCalculator } from './tool/ubeCalculator/entry';
 import { waterPurifier } from './tool/waterPurifier/entry';
-export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];
+export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, targetHeightEstimator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './tool/bodyFatPercentageCalculator';
 export * from './tool/macronutrientCalculator';
 export * from './tool/tdeeCalculator';
 export * from './tool/bunCreatinineCalculator';
+export * from './tool/targetHeightEstimator';
 
 export { healthCategory } from './category';
 export const healthCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/tests/locale_completeness.test.ts

@@ -36,6 +36,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(27);
+    expect(ALL_TOOLS.length).toBe(28);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { healthCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 27 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(27);
+    it('should have 28 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(28);
     });
 
     it('healthCategory should be defined', () => {

package/src/tool/targetHeightEstimator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { targetHeightEstimator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await targetHeightEstimator.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/targetHeightEstimator/bibliography.ts

@@ -0,0 +1,28 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: "Tanner, Goldstein & Whitehouse: Standards for children's height allowing for height of parents",
+    url: 'https://doi.org/10.1136/adc.45.244.755',
+  },
+  {
+    name: 'Luo, Albertsson-Wikland & Karlberg: Target height as predicted by parental heights for Swedish children',
+    url: 'https://doi.org/10.1203/00006450-199804000-00016',
+  },
+  {
+    name: 'Merck Manual Professional: Physical growth of infants and children',
+    url: 'https://www.merckmanuals.com/professional/pediatrics/growth-and-development/physical-growth-of-infants-and-children',
+  },
+  {
+    name: 'CDC: Clinical growth charts',
+    url: 'https://www.cdc.gov/growthcharts/clinical_charts.htm',
+  },
+  {
+    name: 'WHO: Child growth standards',
+    url: 'https://www.who.int/tools/child-growth-standards',
+  },
+  {
+    name: 'Wikipedia: Human height',
+    url: 'https://en.wikipedia.org/wiki/Human_height',
+  },
+];

package/src/tool/targetHeightEstimator/component.astro

@@ -0,0 +1,335 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { TargetHeightEstimatorUI } from './ui';
+
+interface Props {
+  locale?: string;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui || {}) as TargetHeightEstimatorUI;
+---
+
+<div class="the" data-ui={JSON.stringify(t)}>
+  <div class="the__shell">
+    <div class="the__stage">
+      <svg class="the__scene" viewBox="0 0 760 430" role="img" aria-label={t.scaleAriaLabel}>
+        <defs>
+          <linearGradient id="theRangeFill" x1="0" x2="1">
+            <stop offset="0" stop-color="#5fa8d3" stop-opacity="0.18" />
+            <stop offset="0.5" stop-color="#57c4a6" stop-opacity="0.32" />
+            <stop offset="1" stop-color="#f0b35b" stop-opacity="0.18" />
+          </linearGradient>
+        </defs>
+        <rect class="the__wall" x="20" y="18" width="720" height="360" rx="8" />
+        <g class="the__ticks" id="the-ticks"></g>
+        <path id="the-range-band" class="the__range-band" d="M110 170 C260 145 430 145 650 170 L650 220 C430 246 260 246 110 220 Z" />
+        <line id="the-target-line" class="the__target-line" x1="86" y1="194" x2="682" y2="194" />
+        <line class="the__floor" x1="82" y1="366" x2="700" y2="366" />
+        <g class="the__person the__person--mother" id="the-mother-figure" transform="translate(168 366) scale(0.92)">
+          <circle cx="0" cy="-270" r="27" />
+          <path class="the__hair" d="M-26 -266 C-33 -292 -14 -308 6 -304 C28 -300 37 -276 28 -254 C18 -270 -8 -282 -26 -266 Z" />
+          <path class="the__body" d="M-28 -232 C-12 -244 12 -244 28 -232 C42 -204 43 -158 34 -122 L45 -54 L18 -54 L13 0 L-13 0 L-18 -54 L-45 -54 L-34 -122 C-43 -158 -42 -204 -28 -232 Z" />
+          <path class="the__arm" d="M-32 -214 C-61 -180 -62 -128 -45 -84" />
+          <path class="the__arm" d="M32 -214 C61 -180 62 -128 45 -84" />
+          <path class="the__leg" d="M-16 -54 L-20 0" />
+          <path class="the__leg" d="M16 -54 L20 0" />
+        </g>
+        <g class="the__person the__person--child" id="the-child" data-sex="boy" transform="translate(386 366) scale(0.86)">
+          <circle cx="0" cy="-258" r="25" />
+          <path class="the__hair the__hair--boy" d="M-24 -260 C-21 -282 -1 -293 20 -284 C29 -279 32 -264 27 -250 C14 -260 -7 -266 -24 -260 Z" />
+          <path class="the__hair the__hair--girl" d="M-25 -260 C-22 -284 -2 -297 20 -286 C31 -280 35 -262 27 -248 C15 -263 -7 -270 -25 -260 Z" />
+          <circle class="the__ponytail" cx="31" cy="-250" r="10" />
+          <path class="the__body the__body--boy" d="M-25 -218 C-10 -229 10 -229 25 -218 C34 -194 34 -154 24 -118 L-24 -118 C-34 -154 -34 -194 -25 -218 Z" />
+          <path class="the__pants the__pants--boy" d="M-22 -118 L-5 -118 L-9 -2 L-24 -2 Z" />
+          <path class="the__pants the__pants--boy" d="M5 -118 L22 -118 L24 -2 L9 -2 Z" />
+          <path class="the__body the__body--girl" d="M-25 -218 C-10 -229 10 -229 25 -218 C37 -190 38 -148 30 -116 L36 -58 L14 -58 L10 0 L-10 0 L-14 -58 L-36 -58 L-30 -116 C-38 -148 -37 -190 -25 -218 Z" />
+          <path class="the__arm" d="M-29 -202 C-52 -170 -54 -126 -40 -90" />
+          <path class="the__arm" d="M29 -202 C52 -170 54 -126 40 -90" />
+          <path class="the__leg the__leg--boy" d="M-16 -2 L-18 0" />
+          <path class="the__leg the__leg--boy" d="M16 -2 L18 0" />
+          <path class="the__leg the__leg--girl" d="M-12 -58 L-15 0" />
+          <path class="the__leg the__leg--girl" d="M12 -58 L15 0" />
+        </g>
+        <g class="the__person the__person--father" id="the-father-figure" transform="translate(600 366) scale(1.02)">
+          <circle cx="0" cy="-276" r="29" />
+          <path class="the__hair" d="M-27 -278 C-18 -305 14 -306 29 -282 C17 -292 -8 -294 -27 -278 Z" />
+          <path class="the__body" d="M-31 -236 C-13 -248 13 -248 31 -236 C43 -206 42 -158 34 -120 L28 0 L10 0 L5 -72 L-5 -72 L-10 0 L-28 0 L-34 -120 C-42 -158 -43 -206 -31 -236 Z" />
+          <path class="the__arm" d="M-35 -218 C-66 -182 -68 -126 -49 -82" />
+          <path class="the__arm" d="M35 -218 C66 -182 68 -126 49 -82" />
+          <path class="the__leg" d="M-10 -72 L-13 0" />
+          <path class="the__leg" d="M10 -72 L13 0" />
+        </g>
+        <text class="the__figure-label" x="166" y="402">{t.motherFigure}</text>
+        <text class="the__figure-label" x="386" y="402">{t.childFigure}</text>
+        <text class="the__figure-label" x="594" y="402">{t.fatherFigure}</text>
+        <text class="the__scale-label" x="44" y="38">{t.wallScale}</text>
+      </svg>
+      <div class="the__result">
+        <span>{t.targetLabel}</span>
+        <strong id="the-target">{t.targetInitial}</strong>
+        <em id="the-range">{t.rangeInitial}</em>
+      </div>
+    </div>
+
+    <div class="the__panel">
+      <div class="the__toggles">
+        <div class="the__unit" role="group" aria-label={t.unitSystemLabel}>
+          <button class="the__unit-btn the__unit-btn--active" type="button" data-unit="metric">{t.unitMetric}</button>
+          <button class="the__unit-btn" type="button" data-unit="imperial">{t.unitImperial}</button>
+        </div>
+        <div class="the__sex" role="group" aria-label={t.labelSex}>
+          <button class="the__sex-btn the__sex-btn--active" type="button" data-sex="boy" title={t.labelBoy}>
+            <Icon name="mdi:gender-male" />
+          </button>
+          <button class="the__sex-btn" type="button" data-sex="girl" title={t.labelGirl}>
+            <Icon name="mdi:gender-female" />
+          </button>
+        </div>
+      </div>
+
+      <label class="the__field">
+        <span><span>{t.labelMother}</span><strong id="the-mother-value">{t.motherInitial}</strong></span>
+        <input id="the-mother" class="the__range" type="range" min="140" max="190" value="162" />
+      </label>
+
+      <label class="the__field">
+        <span><span>{t.labelFather}</span><strong id="the-father-value">{t.fatherInitial}</strong></span>
+        <input id="the-father" class="the__range" type="range" min="150" max="205" value="176" />
+      </label>
+
+      <div class="the__cards">
+        <div class="the__card">
+          <Icon name="mdi:function-variant" />
+          <p><strong>{t.formulaTitle}</strong> <span id="the-formula">{t.formulaBoy}</span></p>
+        </div>
+        <div class="the__card">
+          <Icon name="mdi:chart-bell-curve" />
+          <p><strong>{t.rangeTitle}</strong> {t.rangeText}</p>
+        </div>
+        <div class="the__card the__card--note">
+          <Icon name="mdi:stethoscope" />
+          <p><strong>{t.clinicalNoteTitle}</strong> {t.clinicalNoteText}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  type Sex = 'boy' | 'girl';
+  type Unit = 'metric' | 'imperial';
+
+  interface Elements {
+    mother: HTMLInputElement;
+    father: HTMLInputElement;
+    motherValue: HTMLElement;
+    fatherValue: HTMLElement;
+    target: HTMLElement;
+    range: HTMLElement;
+    formula: HTMLElement;
+    child: SVGGElement;
+    motherFigure: SVGGElement;
+    fatherFigure: SVGGElement;
+    targetLine: SVGLineElement;
+    rangeBand: SVGPathElement;
+    ticks: SVGGElement;
+    unitBtns: NodeListOf<HTMLButtonElement>;
+    sexBtns: NodeListOf<HTMLButtonElement>;
+  }
+
+  interface State {
+    unit: Unit;
+    sex: Sex;
+    motherCm: number;
+    fatherCm: number;
+  }
+
+  const STORAGE_KEY = 'target_height_estimator_state';
+  const RANGE_CM = 8.5;
+
+  function required<T extends Element>(container: Element, selector: string): T {
+    const element = container.querySelector<T>(selector);
+    if (!element) throw new Error(selector);
+    return element;
+  }
+
+  function getElements(container: Element): Elements | null {
+    try {
+      return {
+        mother: required<HTMLInputElement>(container, '#the-mother'),
+        father: required<HTMLInputElement>(container, '#the-father'),
+        motherValue: required<HTMLElement>(container, '#the-mother-value'),
+        fatherValue: required<HTMLElement>(container, '#the-father-value'),
+        target: required<HTMLElement>(container, '#the-target'),
+        range: required<HTMLElement>(container, '#the-range'),
+        formula: required<HTMLElement>(container, '#the-formula'),
+        child: required<SVGGElement>(container, '#the-child'),
+        motherFigure: required<SVGGElement>(container, '#the-mother-figure'),
+        fatherFigure: required<SVGGElement>(container, '#the-father-figure'),
+        targetLine: required<SVGLineElement>(container, '#the-target-line'),
+        rangeBand: required<SVGPathElement>(container, '#the-range-band'),
+        ticks: required<SVGGElement>(container, '#the-ticks'),
+        unitBtns: container.querySelectorAll<HTMLButtonElement>('.the__unit-btn'),
+        sexBtns: container.querySelectorAll<HTMLButtonElement>('.the__sex-btn'),
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  function cmToIn(cm: number): number {
+    return cm / 2.54;
+  }
+
+  function inToCm(inches: number): number {
+    return inches * 2.54;
+  }
+
+  function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  function isUnit(value: unknown): value is Unit {
+    return value === 'metric' || value === 'imperial';
+  }
+
+  function isSex(value: unknown): value is Sex {
+    return value === 'boy' || value === 'girl';
+  }
+
+  function loadState(): State {
+    const fallback: State = { unit: 'metric', sex: 'boy', motherCm: 162, fatherCm: 176 };
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (!raw) return fallback;
+      const saved = JSON.parse(raw) as Partial<State>;
+      return {
+        unit: isUnit(saved.unit) ? saved.unit : fallback.unit,
+        sex: isSex(saved.sex) ? saved.sex : fallback.sex,
+        motherCm: clamp(Number(saved.motherCm) || fallback.motherCm, 130, 210),
+        fatherCm: clamp(Number(saved.fatherCm) || fallback.fatherCm, 130, 220),
+      };
+    } catch {
+      return fallback;
+    }
+  }
+
+  function saveState(state: State) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+    }
+  }
+
+  function calculateTarget(motherCm: number, fatherCm: number, sex: Sex): number {
+    return (fatherCm + motherCm + (sex === 'boy' ? 13 : -13)) / 2;
+  }
+
+  function formatLength(cm: number, unit: Unit, ui: Record<string, string>): string {
+    if (unit === 'imperial') {
+      const totalInches = Math.round(cmToIn(cm));
+      return `${Math.floor(totalInches / 12)} ${ui.unitFt} ${totalInches % 12} ${ui.unitIn}`;
+    }
+    return `${Math.round(cm)} ${ui.unitCm}`;
+  }
+
+  function heightToY(cm: number): number {
+    return 354 - ((cm - 130) / 90) * 290;
+  }
+
+  function syncRanges(elements: Elements, state: State) {
+    if (state.unit === 'imperial') {
+      elements.mother.min = '55';
+      elements.mother.max = '75';
+      elements.mother.step = '0.5';
+      elements.mother.value = cmToIn(state.motherCm).toFixed(1);
+      elements.father.min = '59';
+      elements.father.max = '81';
+      elements.father.step = '0.5';
+      elements.father.value = cmToIn(state.fatherCm).toFixed(1);
+    } else {
+      elements.mother.min = '140';
+      elements.mother.max = '190';
+      elements.mother.step = '1';
+      elements.mother.value = String(Math.round(state.motherCm));
+      elements.father.min = '150';
+      elements.father.max = '205';
+      elements.father.step = '1';
+      elements.father.value = String(Math.round(state.fatherCm));
+    }
+  }
+
+  function syncButtons(elements: Elements, state: State) {
+    elements.unitBtns.forEach((btn) => btn.classList.toggle('the__unit-btn--active', btn.dataset.unit === state.unit));
+    elements.sexBtns.forEach((btn) => btn.classList.toggle('the__sex-btn--active', btn.dataset.sex === state.sex));
+  }
+
+  function renderTicks(elements: Elements, state: State, ui: Record<string, string>) {
+    const values = state.unit === 'imperial' ? [55, 60, 65, 70, 75, 80] : [140, 150, 160, 170, 180, 190, 200];
+    elements.ticks.innerHTML = values.map((value) => {
+      const cm = state.unit === 'imperial' ? inToCm(value) : value;
+      const y = heightToY(cm);
+      const label = state.unit === 'imperial' ? `${Math.floor(value / 12)} ${ui.unitFt} ${value % 12} ${ui.unitIn}` : `${value} ${ui.unitCm}`;
+      return `<g><line x1="46" y1="${y}" x2="710" y2="${y}" /><text x="54" y="${y - 6}">${label}</text></g>`;
+    }).join('');
+  }
+
+  function render(elements: Elements, state: State, ui: Record<string, string>) {
+    const target = calculateTarget(state.motherCm, state.fatherCm, state.sex);
+    const lower = target - RANGE_CM;
+    const upper = target + RANGE_CM;
+    const targetY = heightToY(target);
+    const upperY = heightToY(upper);
+    const lowerY = heightToY(lower);
+    const childScale = clamp(target / 175, 0.82, 1.2);
+    const motherScale = clamp(state.motherCm / 175, 0.78, 1.12);
+    const fatherScale = clamp(state.fatherCm / 175, 0.82, 1.2);
+
+    elements.motherValue.textContent = formatLength(state.motherCm, state.unit, ui);
+    elements.fatherValue.textContent = formatLength(state.fatherCm, state.unit, ui);
+    elements.target.textContent = formatLength(target, state.unit, ui);
+    elements.range.textContent = `${ui.rangeLabel}: ${formatLength(lower, state.unit, ui)} - ${formatLength(upper, state.unit, ui)}`;
+    elements.formula.textContent = state.sex === 'boy' ? ui.formulaBoy : ui.formulaGirl;
+    elements.child.setAttribute('data-sex', state.sex);
+    elements.motherFigure.setAttribute('transform', `translate(168 366) scale(${motherScale})`);
+    elements.child.setAttribute('transform', `translate(386 366) scale(${childScale})`);
+    elements.fatherFigure.setAttribute('transform', `translate(600 366) scale(${fatherScale})`);
+    elements.targetLine.setAttribute('y1', String(targetY));
+    elements.targetLine.setAttribute('y2', String(targetY));
+    elements.rangeBand.setAttribute('d', `M110 ${upperY} C260 ${upperY - 22} 430 ${upperY - 22} 650 ${upperY} L650 ${lowerY} C430 ${lowerY + 22} 260 ${lowerY + 22} 110 ${lowerY} Z`);
+    renderTicks(elements, state, ui);
+  }
+
+  function initTargetHeight(container: Element) {
+    const ui = JSON.parse((container as HTMLElement).dataset.ui || '{}') as Record<string, string>;
+    const elements = getElements(container);
+    if (!elements) return;
+    const state = loadState();
+    const update = () => {
+      state.motherCm = state.unit === 'imperial' ? inToCm(Number(elements.mother.value)) : Number(elements.mother.value);
+      state.fatherCm = state.unit === 'imperial' ? inToCm(Number(elements.father.value)) : Number(elements.father.value);
+      render(elements, state, ui);
+      saveState(state);
+    };
+
+    elements.unitBtns.forEach((btn) => btn.addEventListener('click', () => {
+      state.unit = btn.dataset.unit as Unit;
+      syncButtons(elements, state);
+      syncRanges(elements, state);
+      update();
+    }));
+    elements.sexBtns.forEach((btn) => btn.addEventListener('click', () => {
+      state.sex = btn.dataset.sex as Sex;
+      syncButtons(elements, state);
+      update();
+    }));
+    elements.mother.addEventListener('input', update);
+    elements.father.addEventListener('input', update);
+    syncButtons(elements, state);
+    syncRanges(elements, state);
+    update();
+  }
+
+  document.querySelectorAll('.the').forEach(initTargetHeight);
+</script>

package/src/tool/targetHeightEstimator/entry.ts

@@ -0,0 +1,27 @@
+import type { HealthToolEntry } from '../../types';
+import type { TargetHeightEstimatorUI } from './ui';
+
+export const targetHeightEstimator: HealthToolEntry<TargetHeightEstimatorUI> = {
+  id: 'targetHeightEstimator',
+  icons: {
+    bg: 'mdi:human-male-height',
+    fg: 'mdi:account-child',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};