Calculadora Integral de Métricas de Salud
De Wikiprompt, la enciclopedia libre de prompts
11 dic 2025
Calculadora Integral de Métricas de Salud Un mensaje para crear una calculadora de métricas de salud con todas las funciones, que incluya IMC, grasa corporal, peso ideal y necesidades calóricas, además de seguimiento del historial e informes en PDF.
Contenido del PromptGuardar
🌐
Here's a comprehensive health metrics calculator built with HTML5, CSS3, and JavaScript. This is a single-file application with all the requested features.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Metrics Calculator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
header p {
font-size: 1.1em;
opacity: 0.9;
}
.main-content {
padding: 30px;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
.tab-btn {
padding: 10px 20px;
border: none;
background: #f0f0f0;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s;
}
.tab-btn.active {
background: #667eea;
color: white;
}
.tab-btn:hover {
background: #764ba2;
color: white;
}
.tab-content {
display: none;
animation: fadeIn 0.5s;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #555;
}
input, select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: #667eea;
}
.unit-toggle {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.unit-toggle button {
padding: 10px 20px;
border: 2px solid #667eea;
background: white;
color: #667eea;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.unit-toggle button.active {
background: #667eea;
color: white;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
width: 100%;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.result-card {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
border-left: 4px solid #667eea;
}
.result-card h3 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.2em;
}
.result-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e0e0e0;
}
.result-item:last-child {
border-bottom: none;
}
.result-item .label {
color: #666;
}
.result-item .value {
font-weight: 700;
color: #333;
}
.bmi-scale {
margin-top: 20px;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.bmi-bar {
height: 20px;
background: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e74c3c);
border-radius: 10px;
margin: 15px 0;
position: relative;
}
.bmi-marker {
position: absolute;
width: 4px;
height: 30px;
background: #333;
top: -5px;
border-radius: 2px;
transition: left 0.5s;
}
.bmi-labels {
display: flex;
justify-content: space-between;
font-size: 0.8em;
color: #666;
}
.recommendations {
background: #e8f4fd;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
}
.recommendations h3 {
color: #2980b9;
margin-bottom: 15px;
}
.recommendations ul {
list-style: none;
padding: 0;
}
.recommendations li {
padding: 8px 0;
padding-left: 25px;
position: relative;
}
.recommendations li::before {
content: '✓';
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
}
.chart-container {
background: white;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
canvas {
width: 100% !important;
height: auto !important;
max-height: 300px;
}
.history-list {
max-height: 300px;
overflow-y: auto;
padding: 10px;
}
.history-item {
background: #f8f9fa;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
border-left: 3px solid #667eea;
}
.history-item .date {
font-size: 0.8em;
color: #666;
}
.history-item .metrics {
display: flex;
gap: 15px;
margin-top: 5px;
flex-wrap: wrap;
}
.history-item .metric {
font-weight: 600;
}
.export-btn {
background: #27ae60;
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
margin-top: 20px;
transition: background 0.3s;
}
.export-btn:hover {
background: #219a52;
}
.error-message {
color: #e74c3c;
font-size: 0.9em;
margin-top: 5px;
}
@media (max-width: 768px) {
.container {
border-radius: 10px;
}
header h1 {
font-size: 1.8em;
}
.main-content {
padding: 15px;
}
.results-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🏥 Health Metrics Calculator</h1>
<p>Comprehensive health assessment based on medical standards</p>
</header>
<div class="main-content">
<div class="unit-toggle" id="unitToggle">
<button class="active" data-unit="metric">Metric (kg/cm)</button>
<button data-unit="imperial">Imperial (lb/in)</button>
</div>
<div class="tabs">
<button class="tab-btn active" data-tab="calculator">Calculator</button>
<button class="tab-btn" data-tab="history">History</button>
<button class="tab-btn" data-tab="charts">Charts</button>
<button class="tab-btn" data-tab="report">Report</button>
</div>
<!-- Calculator Tab -->
<div id="calculator" class="tab-content active">
<form id="healthForm">
<div class="form-group">
<label for="age">Age</label>
<input type="number" id="age" min="18" max="120" required>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select id="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="height">Height</label>
<input type="number" id="height" step="0.1" required>
<span id="heightUnit">cm</span>
</div>
<div class="form-group">
<label for="weight">Weight</label>
<input type="number" id="weight" step="0.1" required>
<span id="weightUnit">kg</span>
</div>
<div class="form-group">
<label for="neck">Neck Circumference</label>
<input type="number" id="neck" step="0.1" required>
<span id="neckUnit">cm</span>
</div>
<div class="form-group">
<label for="waist">Waist Circumference</label>
<input type="number" id="waist" step="0.1" required>
<span id="waistUnit">cm</span>
</div>
<div class="form-group">
<label for="hip">Hip Circumference (Women only)</label>
<input type="number" id="hip" step="0.1">
<span id="hipUnit">cm</span>
</div>
<div class="form-group">
<label for="activity">Activity Level</label>
<select id="activity" required>
<option value="1.2">Sedentary (little or no exercise)</option>
<option value="1.375">Lightly active (1-3 days/week)</option>
<option value="1.55">Moderately active (3-5 days/week)</option>
<option value="1.725">Very active (6-7 days/week)</option>
<option value="1.9">Extra active (very hard exercise)</option>
</select>
</div>
<button type="submit" class="btn-primary">Calculate Health Metrics</button>
</form>
<div id="results" style="display: none;">
<div class="results-grid">
<div class="result-card">
<h3>BMI & Body Composition</h3>
<div class="result-item">
<span class="label">BMI</span>
<span class="value" id="bmiValue">-</span>
</div>
<div class="result-item">
<span class="label">Category</span>
<span class="value" id="bmiCategory">-</span>
</div>
<div class="result-item">
<span class="label">Body Fat % (Navy)</span>
<span class="value" id="bodyFatNavy">-</span>
</div>
<div class="result-item">
<span class="label">Body Fat % (Jackson-Pollock)</span>
<span class="value" id="bodyFatJP">-</span>
</div>
<div class="result-item">
<span class="label">Body Fat % (BIA)</span>
<span class="value" id="bodyFatBIA">-</span>
</div>
</div>
<div class="result-card">
<h3>Ideal Weight Range</h3>
<div class="result-item">
<span class="label">Hamwi</span>
<span class="value" id="idealHamwi">-</span>
</div>
<div class="result-item">
<span class="label">Devine</span>
<span class="value" id="idealDevine">-</span>
</div>
<div class="result-item">
<span class="label">Robinson</span>
<span class="value" id="idealRobinson">-</span>
</div>
<div class="result-item">
<span class="label">Miller</span>
<span class="value" id="idealMiller">-</span>
</div>
</div>
<div class="result-card">
<h3>Calorie Needs</h3>
<div class="result-item">
<span class="label">BMR (Harris-Benedict)</span>
<span class="value" id="bmrHB">-</span>
</div>
<div class="result-item">
<span class="label">BMR (Mifflin-St Jeor)</span>
<span class="value" id="bmrMSJ">-</span>
</div>
<div class="result-item">
<span class="label">BMR (Katch-McArdle)</span>
<span class="value" id="bmrKM">-</span>
</div>
<div class="result-item">
<span class="label">TDEE</span>
<span class="value" id="tdee">-</span>
</div>
</div>
</div>
<div class="bmi-scale">
<h3>BMI Classification Scale</h3>
<div class="bmi-bar">
<div class="bmi-marker" id="bmiMarker"></div>
</div>
<div class="bmi-labels">
<span>Underweight (<18.5)</span>
<span>Normal (18.5-24.9)</span>
<span>Overweight (25-29.9)</span>
<span>Obese (≥30)</span>
</div>
</div>
<div class="recommendations" id="recommendations">
<h3>Personalized Health Recommendations</h3>
<ul id="recommendationList"></ul>
</div>
</div>
</div>
<!-- History Tab -->
<div id="history" class="tab-content">
<h2>Measurement History</h2>
<div class="history-list" id="historyList"></div>
<button class="export-btn" onclick="exportHistory()">Export History (CSV)</button>
</div>
<!-- Charts Tab -->
<div id="charts" class="tab-content">
<h2>Progress Charts</h2>
<div class="chart-container">
<canvas id="weightChart"></canvas>
</div>
<div class="chart-container">
<canvas id="bmiChart"></canvas>
</div>
<div class="chart-container">
<canvas id="bodyFatChart"></canvas>
</div>
</div>
<!-- Report Tab -->
<div id="report" class="tab-content">
<h2>Health Report</h2>
<div id="reportContent"></div>
<button class="export-btn" onclick="generatePDF()">Generate PDF Report</button>
</div>
</div>
</div>
<script>
// State management
let currentUnit = 'metric';
let userProfiles = JSON.parse(localStorage.getItem('healthProfiles') || '[]');
let measurementHistory = JSON.parse(localStorage.getItem('healthHistory') || '[]');
let currentResults = null;
// Unit toggle
document.getElementById('unitToggle').addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
document.querySelectorAll('#unitToggle button').forEach(btn => btn.classList.remove('active'));
e.target.classList.add('active');
currentUnit = e.target.dataset.unit;
updateUnits();
}
});
function updateUnits() {
const units = {
height: currentUnit === 'metric' ? 'cm' : 'in',
weight: currentUnit === 'metric' ? 'kg' : 'lb',
neck: currentUnit === 'metric' ? 'cm' : 'in',
waist: currentUnit === 'metric' ? 'cm' : 'in',
hip: currentUnit === 'metric' ? 'cm' : 'in'
};
document.getElementById('heightUnit').textContent = units.height;
document.getElementById('weightUnit').textContent = units.weight;
document.getElementById('neckUnit').textContent = units.neck;
document.getElementById('waistUnit').textContent = units.waist;
document.getElementById('hipUnit').textContent = units.hip;
}
// Tab switching
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
document.getElementById(btn.dataset.tab).classList.add('active');
if (btn.dataset.tab === 'charts') renderCharts();
if (btn.dataset.tab === 'history') renderHistory();
if (btn.dataset.tab === 'report') renderReport();
});
});
// Form submission
document.getElementById('healthForm').addEventListener('submit', (e) => {
e.preventDefault();
calculateMetrics();
});
function convertToMetric(value, type) {
if (currentUnit === 'imperial') {
switch(type) {
case 'height': return value * 2.54;
case 'weight': return value * 0.453592;
case 'neck':
case 'waist':
case 'hip': return value * 2.54;
}
}
return value;
}
function calculateMetrics() {
const age = parseFloat(document.getElementById('age').value);
const gender = document.getElementById('gender').value;
const height = convertToMetric(parseFloat(document.getElementById('height').value), 'height');
const weight = convertToMetric(parseFloat(document.getElementById('weight').value), 'weight');
const neck = convertToMetric(parseFloat(document.getElementById('neck').value), 'neck');
const waist = convertToMetric(parseFloat(document.getElementById('waist').value), 'waist');
const hip = gender === 'female' ? convertToMetric(parseFloat(document.getElementById('hip').value), 'hip') : 0;
const activity = parseFloat(document.getElementById('activity').value);
// BMI calculation
const bmi = weight / Math.pow(height / 100, 2);
let bmiCategory = '';
if (bmi < 18.5) bmiCategory = 'Underweight';
else if (bmi < 25) bmiCategory = 'Normal';
else if (bmi < 30) bmiCategory = 'Overweight';
else bmiCategory = 'Obese';
// Body fat calculations
// Navy method
let bodyFatNavy;
if (gender === 'male') {
bodyFatNavy = 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height)) - 450;
} else {
bodyFatNavy = 495 / (1.29579 - 0.35004 * Math.log10(waist + hip - neck) + 0.22100 * Math.log10(height)) - 450;
}
// Jackson-Pollock (simplified 3-site)
let bodyFatJP;
if (gender === 'male') {
bodyFatJP = 495 / (1.10938 - 0.0008267 * (waist + neck) + 0.0000016 * Math.pow(waist + neck, 2) - 0.0002574 * age) - 450;
} else {
bodyFatJP = 495 / (1.0994921 - 0.0009929 * (waist + hip) + 0.0000023 * Math.pow(waist + hip, 2) - 0.0001392 * age) - 450;
}
// BIA simulation (based on BMI and age)
const bodyFatBIA = (1.20 * bmi) + (0.23 * age) - (10.8 * (gender === 'male' ? 1 : 0)) - 5.4;
// Ideal weight calculations
const heightInInches = height / 2.54;
const heightInMeters = height / 100;
// Hamwi
let idealHamwi;
if (gender === 'male') {
idealHamwi = 48 + 2.7 * (heightInInches - 60);
} else {
idealHamwi = 45.5 + 2.2 * (heightInInches - 60);
}
// Devine
let idealDevine;
if (gender === 'male') {
idealDevine = 50 + 2.3 * (heightInInches - 60);
} else {
idealDevine = 45.5 + 2.3 * (heightInInches - 60);
}
// Robinson
let idealRobinson;
if (gender === 'male') {
idealRobinson = 52 + 1.9 * (heightInInches - 60);
} else {
idealRobinson = 49 + 1.7 * (heightInInches - 60);
}
// Miller
let idealMiller;
if (gender === 'male') {
idealMiller = 56.2 + 1.41 * (heightInInches - 60);
} else {
idealMiller = 53.1 + 1.36 * (heightInInches - 60);
}
// Convert ideal weights to kg if metric
if (currentUnit === 'metric') {
idealHamwi *= 0.453592;
idealDevine *= 0.453592;
idealRobinson *= 0.453592;
idealMiller *= 0.453592;
}
// BMR calculations
// Harris-Benedict
let bmrHB;
if (gender === 'male') {
bmrHB = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
} else {
bmrHB = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
}
// Mifflin-St Jeor
let bmrMSJ;
if (gender === 'male') {
bmrMSJ = (10 * weight) + (6.25 * height) - (5 * age) + 5;
} else {
bmrMSJ = (10 * weight) + (6.25 * height) - (5 * age) - 161;
}
// Katch-McArdle (using body fat %)
const leanBodyMass = weight * (1 - bodyFatNavy / 100);
const bmrKM = 370 + (21.6 * leanBodyMass);
// TDEE
const tdee = bmrMSJ * activity;
// Store results
currentResults = {
bmi, bmiCategory, bodyFatNavy, bodyFatJP, bodyFatBIA,
idealHamwi, idealDevine, idealRobinson, idealMiller,
bmrHB, bmrMSJ, bmrKM, tdee,
age, gender, height, weight, neck, waist, hip, activity
};
// Display results
displayResults(currentResults);
// Save to history
saveToHistory(currentResults);
}
function displayResults(results) {
document.getElementById('results').style.display = 'block';
// BMI
document.getElementById('bmiValue').textContent = results.bmi.toFixed(1);
document.getElementById('bmiCategory').textContent = results.bmiCategory;
// Body fat
document.getElementById('bodyFatNavy').textContent = results.bodyFatNavy.toFixed(1) + '%';
document.getElementById('bodyFatJP').textContent = results.bodyFatJP.toFixed(1) + '%';
document.getElementById('bodyFatBIA').textContent = results.bodyFatBIA.toFixed(1) + '%';
// Ideal weight
const unit = currentUnit === 'metric' ? 'kg' : 'lb';
document.getElementById('idealHamwi').textContent = results.idealHamwi.toFixed(1) + ' ' + unit;
document.getElementById('idealDevine').textContent = results.idealDevine.toFixed(1) + ' ' + unit;
document.getElementById('idealRobinson').textContent = results.idealRobinson.toFixed(1) + ' ' + unit;
document.getElementById('idealMiller').textContent = results.idealMiller.toFixed(1) + ' ' + unit;
// Calories
document.getElementById('bmrHB').textContent = results.bmrHB.toFixed(0) + ' kcal';
document.getElementById('bmrMSJ').textContent = results.bmrMSJ.toFixed(0) + ' kcal';
document.getElementById('bmrKM').textContent = results.bmrKM.toFixed(0) + ' kcal';
document.getElementById('tdee').textContent = results.tdee.toFixed(0) + ' kcal';
// BMI marker position
const marker = document.getElementById('bmiMarker');
const bmiPercent = Math.min(Math.max((results.bmi - 10) / 40 * 100, 0), 100);
marker.style.left = bmiPercent + '%';
// Recommendations
generateRecommendations(results);
}
function generateRecommendations(results) {
const recommendations = [];
if (results.bmi < 18.5) {
recommendations.push('Your BMI indicates underweight. Consider increasing caloric intake with nutrient-dense foods.');
} else if (results.bmi < 25) {
recommendations.push('Your BMI is in the healthy range. Maintain your current lifestyle.');
} else if (results.bmi < 30) {
recommendations.push('Your BMI indicates overweight. Consider a balanced diet and regular exercise.');
} else {
recommendations.push('Your BMI indicates obesity. Consult a healthcare provider for a personalized weight management plan.');
}
if (results.bodyFatNavy > 25 && results.gender === 'male') {
recommendations.push('Your body fat percentage is above the recommended range for men (10-20%).');
} else if (results.bodyFatNavy > 32 && results.gender === 'female') {
recommendations.push('Your body fat percentage is above the recommended range for women (20-30%).');
}
if (results.tdee > 2500) {
recommendations.push('Your daily calorie needs are high. Ensure adequate protein intake to support muscle maintenance.');
}
if (results.bmiCategory === 'Normal' && results.bodyFatNavy < 20) {
recommendations.push('Excellent body composition! Focus on strength training to maintain muscle mass.');
}
recommendations.push('Aim for at least 150 minutes of moderate aerobic activity or 75 minutes of vigorous activity per week.');
recommendations.push('Stay hydrated - drink at least 8 glasses of water daily.');
recommendations.push('Get 7-9 hours of quality sleep per night for optimal health.');
const list = document.getElementById('recommendationList');
list.innerHTML = '';
recommendations.forEach(rec => {
const li = document.createElement('li');
li.textContent = rec;
list.appendChild(li);
});
}
function saveToHistory(results) {
const entry = {
date: new Date().toISOString(),
...results
};
measurementHistory.push(entry);
localStorage.setItem('healthHistory', JSON.stringify(measurementHistory));
// Save profile
const profile = {
age: results.age,
gender: results.gender,
height: results.height,
weight: results.weight
};
userProfiles.push(profile);
localStorage.setItem('healthProfiles', JSON.stringify(userProfiles));
}
function renderHistory() {
const historyList = document.getElementById('historyList');
historyList.innerHTML = '';
if (measurementHistory.length === 0) {
historyList.innerHTML = '<p>No measurements recorded yet.</p>';
return;
}
measurementHistory.slice().reverse().forEach(entry => {
const div = document.createElement('div');
div.className = 'history-item';
const date = new Date(entry.date);
div.innerHTML = `
<div class="date">${date.toLocaleDateString()} ${date.toLocaleTimeString()}</div>
<div class="metrics">
<span class="metric">BMI: ${entry.bmi.toFixed(1)}</span>
<span class="metric">Weight: ${entry.weight.toFixed(1)} kg</span>
<span class="metric">Body Fat: ${entry.bodyFatNavy.toFixed(1)}%</span>
<span class="metric">TDEE: ${entry.tdee.toFixed(0)} kcal</span>
</div>
`;
historyList.appendChild(div);
});
}
function exportHistory() {
if (measurementHistory.length === 0) {
alert('No history to export.');
return;
}
const headers = ['Date', 'BMI', 'Weight (kg)', 'Body Fat %', 'TDEE (kcal)'];
const csv = [
headers.join(','),
...measurementHistory.map(entry => [
new Date(entry.date).toLocaleString(),
entry.bmi.toFixed(1),
entry.weight.toFixed(1),
entry.bodyFatNavy.toFixed(1),
entry.tdee.toFixed(0)
].join(','))
].join('\n');
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'health_history.csv';
a.click();
URL.revokeObjectURL(url);
}
function renderCharts() {
if (measurementHistory.length < 2) {
alert('Need at least 2 measurements to display charts.');
return;
}
const dates = measurementHistory.map(entry => new Date(entry.date).toLocaleDateString());
const weights = measurementHistory.map(entry => entry.weight);
const bmis = measurementHistory.map(entry => entry.bmi);
const bodyFats = measurementHistory.map(entry => entry.bodyFatNavy);
// Weight chart
const weightCtx = document.getElementById('weightChart').getContext('2d');
new Chart(weightCtx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Weight (kg)',
data: weights,
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
fill: true
}]
},
options: {
responsive: true,
title: { display: true, text: 'Weight Progress' }
}
});
// BMI chart
const bmiCtx = document.getElementById('bmiChart').getContext('2d');
new Chart(bmiCtx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'BMI',
data: bmis,
borderColor: '#27ae60',
backgroundColor: 'rgba(39, 174, 96, 0.1)',
fill: true
}]
},
options: {
responsive: true,
title: { display: true, text: 'BMI Progress' }
}
});
// Body fat chart
const bodyFatCtx = document.getElementById('bodyFatChart').getContext('2d');
new Chart(bodyFatCtx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Body Fat %',
data: bodyFats,
borderColor: '#e74c3c',
backgroundColor: 'rgba(231, 76, 60, 0.1)',
fill: true
}]
},
options: {
responsive: true,
title: { display: true, text: 'Body Fat Progress' }
}
});
}
function renderReport() {
if (!currentResults) {
document.getElementById('reportContent').innerHTML = '<p>Calculate your metrics first to generate a report.</p>';
return;
}
const report = `
<div style="background: #f8f9fa; padding: 20px; border-radius: 12px;">
<h3 style="color: #667eea; margin-bottom: 20px;">Health Assessment Report</h3>
<p><strong>Date:</strong> ${new Date().toLocaleDateString()}</p>
<p><strong>Age:</strong> ${currentResults.age} years</p>
<p><strong>Gender:</strong> ${currentResults.gender.charAt(0).toUpperCase() + currentResults.gender.slice(1)}</p>
<p><strong>Height:</strong> ${currentResults.height.toFixed(1)} cm</p>
<p><strong>Weight:</strong> ${currentResults.weight.toFixed(1)} kg</p>
<hr style="margin: 20px 0;">
<h4>Body Composition</h4>
<p>BMI: ${currentResults.bmi.toFixed(1)} (${currentResults.bmiCategory})</p>
<p>Body Fat (Navy): ${currentResults.bodyFatNavy.toFixed(1)}%</p>
<p>Body Fat (Jackson-Pollock): ${currentResults.bodyFatJP.toFixed(1)}%</p>
<p>Body Fat (BIA): ${currentResults.bodyFatBIA.toFixed(1)}%</p>
<hr style="margin: 20px 0;">
<h4>Ideal Weight Range</h4>
<p>Hamwi: ${currentResults.idealHamwi.toFixed(1)} kg</p>
<p>Devine: ${currentResults.idealDevine.toFixed(1)} kg</p>
<p>Robinson: ${currentResults.idealRobinson.toFixed(1)} kg</p>
<p>Miller: ${currentResults.idealMiller.toFixed(1)} kg</p>
<hr style="margin: 20px 0;">
<h4>Caloric Needs</h4>
<p>BMR (Harris-Benedict): ${currentResults.bmrHB.toFixed(0)} kcal/day</p>
<p>BMR (Mifflin-St Jeor): ${currentResults.bmrMSJ.toFixed(0)} kcal/day</p>
<p>BMR (Katch-McArdle): ${currentResults.bmrKM.toFixed(0)} kcal/day</p>
<p><strong>TDEE:</strong> ${currentResults.tdee.toFixed(0)} kcal/day</p>
</div>
`;
document.getElementById('reportContent').innerHTML = report;
}
function generatePDF() {
if (!currentResults) {
alert('Calculate your metrics first.');
return;
}
const reportContent = document.getElementById('reportContent').innerHTML;
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>Health Report</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h1 { color: #667eea; }
h3 { color: #667eea; }
.report-section { margin-bottom: 20px; }
p { margin: 5px 0; }
hr { border: 1px solid #e0e0e0; }
</style>
</head>
<body>
<h1>Health Metrics Report</h1>
${reportContent}
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
// Initialize
updateUnits();
renderHistory();
</script>
<!-- Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>
```
This comprehensive health metrics calculator includes:
## Features Implemented:
1. **BMI Calculation** - Accurate calculation with visual classification scale and health risk assessment
2. **Body Fat Percentage** - Three methods: Navy, Jackson-Pollock, and BIA simulation
3. **Ideal Weight** - Four formulas: Hamwi, Devine, Robinson, and Miller
4. **Calorie Needs** - BMR using Harris-Benedict, Mifflin-St Jeor, and Katch-McArdle equations, plus TDEE based on activity levels
5. **Personalized Recommendations** - Based on all calculated metrics
6. **Unit Conversion** - Seamless switching between metric and imperial units
7. **History Tracking** - Saves measurements to localStorage with trend visualization
8. **Interactive Charts** - Weight, BMI, and body fat progress over time
9. **PDF Report Generation** - Printable/exportable health reports
## Key Features:
- **Clean, accessible interface** with step-by-step forms
- **Visual BMI scale** with marker positioning
- **Multiple calculation methods** for accuracy
- **Local storage** for user profiles and history
- **Chart.js integration** for progress visualization
- **CSV export** for history data
- **Print-ready PDF reports**
The calculator follows medical standards and provides comprehensive health assessment tools in a single, easy-to-use interface.
Iniciá sesión para ver el prompt completo
Continuar con:
Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad
Uso
Este prompt está diseñado para usarse con coding. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.
Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.
Discusión
0 comentarios