Your Heart Rate Zones:
Enter your age to see your target heart rate zones.
.calculator-container {
font-family: sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.calculator-form, .calculator-result {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="number"] {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-group small {
display: block;
margin-top: 5px;
font-size: 0.8em;
color: #666;
}
button {
width: 100%;
padding: 12px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.calculator-result h3 {
margin-top: 0;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
#zoneDetails p {
margin-bottom: 8px;
line-height: 1.6;
}
#zoneDetails p strong {
color: #555;
}
function calculateHeartRateZones() {
var age = document.getElementById("age").value;
var maxHeartRateInput = document.getElementById("maxHeartRate").value;
var zoneDetailsDiv = document.getElementById("zoneDetails");
if (age === "" || isNaN(age) || age <= 0) {
zoneDetailsDiv.innerHTML = "Please enter a valid age.";
return;
}
var estimatedMaxHeartRate;
if (maxHeartRateInput === "" || isNaN(maxHeartRateInput) || maxHeartRateInput <= 0) {
estimatedMaxHeartRate = 220 – parseInt(age);
} else {
estimatedMaxHeartRate = parseInt(maxHeartRateInput);
}
if (estimatedMaxHeartRate <= 0) {
zoneDetailsDiv.innerHTML = "Calculated maximum heart rate is invalid. Please check your age or manually entered maximum heart rate.";
return;
}
// Heart Rate Zone Calculations
// Zone 1: Very Light (50-60% of MHR)
var zone1Min = Math.round(estimatedMaxHeartRate * 0.50);
var zone1Max = Math.round(estimatedMaxHeartRate * 0.60);
// Zone 2: Light (60-70% of MHR) – Fat Burning Zone
var zone2Min = Math.round(estimatedMaxHeartRate * 0.60);
var zone2Max = Math.round(estimatedMaxHeartRate * 0.70);
// Zone 3: Moderate (70-80% of MHR) – Aerobic Zone
var zone3Min = Math.round(estimatedMaxHeartRate * 0.70);
var zone3Max = Math.round(estimatedMaxHeartRate * 0.80);
// Zone 4: Hard (80-90% of MHR) – Anaerobic Zone
var zone4Min = Math.round(estimatedMaxHeartRate * 0.80);
var zone4Max = Math.round(estimatedMaxHeartRate * 0.90);
// Zone 5: Maximum (90-100% of MHR) – Redline Zone
var zone5Min = Math.round(estimatedMaxHeartRate * 0.90);
var zone5Max = Math.round(estimatedMaxHeartRate * 1.00);
zoneDetailsDiv.innerHTML =
"
Estimated Maximum Heart Rate: " + estimatedMaxHeartRate + " BPM" +
"
Zone 1 (Very Light): " + zone1Min + " – " + zone1Max + " BPM (50-60%) – Good for warm-ups, cool-downs, and active recovery." +
"
Zone 2 (Light): " + zone2Min + " – " + zone2Max + " BPM (60-70%) – Excellent for burning fat and building aerobic endurance." +
"
Zone 3 (Moderate): " + zone3Min + " – " + zone3Max + " BPM (70-80%) – Improves cardiovascular fitness and aerobic capacity." +
"
Zone 4 (Hard): " + zone4Min + " – " + zone4Max + " BPM (80-90%) – Builds speed and anaerobic endurance. Intensity increases significantly." +
"
Zone 5 (Maximum): " + zone5Min + " – " + zone5Max + " BPM (90-100%) – For very short bursts of intense effort. Use with caution.";
}