.running-hr-calculator-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.calc-container {
background: #f8f9fa;
padding: 30px;
border-radius: 8px;
border: 1px solid #e9ecef;
margin-bottom: 40px;
}
.calc-h2 {
text-align: center;
color: #2c3e50;
margin-bottom: 25px;
font-size: 24px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #495057;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box; /* Critical for padding */
}
.input-group small {
display: block;
margin-top: 5px;
color: #6c757d;
font-size: 12px;
}
.calc-btn {
width: 100%;
background-color: #e74c3c;
color: white;
padding: 15px;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.calc-btn:hover {
background-color: #c0392b;
}
#hrResult {
margin-top: 30px;
display: none;
}
.zone-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: white;
}
.zone-table th, .zone-table td {
border: 1px solid #dee2e6;
padding: 12px;
text-align: center;
}
.zone-table th {
background-color: #e74c3c;
color: white;
}
.zone-table tr:nth-child(even) {
background-color: #f2f2f2;
}
.metric-box {
background: #e3f2fd;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #bbdefb;
}
.metric-value {
font-size: 24px;
font-weight: bold;
color: #1565c0;
}
.article-content {
line-height: 1.6;
color: #333;
}
.article-content h3 {
color: #2c3e50;
margin-top: 30px;
border-bottom: 2px solid #e74c3c;
padding-bottom: 10px;
display: inline-block;
}
.article-content ul {
padding-left: 20px;
}
.error-msg {
color: #dc3545;
text-align: center;
margin-top: 10px;
display: none;
font-weight: bold;
}
function calculateRunningZones() {
// Get inputs
var ageInput = document.getElementById('runnerAge').value;
var rhrInput = document.getElementById('restingHR').value;
var resultDiv = document.getElementById('hrResult');
var errorDiv = document.getElementById('errorMsg');
var tableBody = document.getElementById('zoneTableBody');
// Clear previous errors/results
errorDiv.style.display = 'none';
resultDiv.style.display = 'none';
tableBody.innerHTML = ";
// Validation
if (!ageInput || !rhrInput) {
errorDiv.innerText = "Please enter both your Age and Resting Heart Rate.";
errorDiv.style.display = 'block';
return;
}
var age = parseFloat(ageInput);
var rhr = parseFloat(rhrInput);
if (isNaN(age) || age 100) {
errorDiv.innerText = "Please enter a valid age between 10 and 100.";
errorDiv.style.display = 'block';
return;
}
if (isNaN(rhr) || rhr 120) {
errorDiv.innerText = "Please enter a valid resting heart rate (typically 30-120 bpm).";
errorDiv.style.display = 'block';
return;
}
// Calculations
// Standard Max HR formula
var maxHR = 220 – age;
// Heart Rate Reserve (Karvonen)
var hrr = maxHR – rhr;
// Display Base Metrics
document.getElementById('displayMaxHR').innerText = Math.round(maxHR);
document.getElementById('displayHRR').innerText = Math.round(hrr);
// Define Zones Configuration
var zones = [
{ id: 1, minPct: 0.50, maxPct: 0.60, name: "Zone 1 (Recovery)", benefit: "Warm up, Cool down, Active Recovery" },
{ id: 2, minPct: 0.60, maxPct: 0.70, name: "Zone 2 (Aerobic Base)", benefit: "Fat Burning, Endurance Building" },
{ id: 3, minPct: 0.70, maxPct: 0.80, name: "Zone 3 (Tempo)", benefit: "Aerobic Capacity, Stamina" },
{ id: 4, minPct: 0.80, maxPct: 0.90, name: "Zone 4 (Threshold)", benefit: "Lactate Tolerance, High Speed Endurance" },
{ id: 5, minPct: 0.90, maxPct: 1.00, name: "Zone 5 (VO2 Max)", benefit: "Peak Performance, Speed" }
];
// Generate Table Rows
for (var i = 0; i < zones.length; i++) {
var zone = zones[i];
// Karvonen Formula: (HRR * %) + RHR
var minBpm = Math.round((hrr * zone.minPct) + rhr);
var maxBpm = Math.round((hrr * zone.maxPct) + rhr);
var row = "";
row += "" + zone.id + " ";
row += "" + zone.name + " (" + (zone.minPct*100) + "-" + (zone.maxPct*100) + "%) ";
row += "" + minBpm + " – " + maxBpm + " bpm ";
row += "" + zone.benefit + " ";
row += " ";
tableBody.innerHTML += row;
}
// Show Results
resultDiv.style.display = 'block';
}
Running Heart Rate Zone Calculator
Used to estimate Maximum Heart Rate (220 – Age).
Measure this in the morning before getting out of bed for accuracy.
Estimated Max Heart Rate: bpm
Heart Rate Reserve: bpm
Your Personal Training Zones
| Zone | Intensity | Heart Rate Range (bpm) | Benefit |
|---|
What Should My Heart Rate Be While Running?
Determine the optimal intensity for your runs is crucial for improving endurance, burning fat, and preventing injury. Unlike generic fitness advice, running heart rate training relies on specific biological markers: your Maximum Heart Rate (MHR) and your Resting Heart Rate (RHR).
Why Monitor Heart Rate While Running?
Running by "feel" (Rate of Perceived Exertion) is useful, but heart rate data provides objective feedback. It ensures you aren't running too hard on easy days (a common mistake) or too easy on hard days. By staying in specific zones, you target different physiological systems.
The Karvonen Formula vs. Standard Formula
Most basic calculators use the standard 220 - Age formula to find Max HR, and then take simple percentages of that number. However, this calculator uses the Karvonen Method, which is widely considered more accurate for athletes.
The Karvonen formula incorporates your Resting Heart Rate to determine your Heart Rate Reserve (HRR). This accounts for your fitness level. The formula is:
Target HR = ((Max HR − Resting HR) × %Intensity) + Resting HR
Understanding the 5 Running Zones
- Zone 1 (50-60%): Recovery. Very easy effort, usually for warm-ups, cool-downs, or active recovery runs. Helps blood flow and muscle repair.
- Zone 2 (60-70%): Aerobic Base. This is the "sweet spot" for distance runners. It builds mitochondrial density and teaches your body to burn fat as fuel. You should be able to hold a conversation easily.
- Zone 3 (70-80%): Aerobic/Tempo. Moderate intensity. Used for tempo runs to improve aerobic capacity and blood circulation efficiency.
- Zone 4 (80-90%): Threshold. Hard effort. This pushes your lactate threshold (the point where muscles fatigue rapidly). Training here helps you sustain faster speeds for longer.
- Zone 5 (90-100%): VO2 Max. Maximum effort. Sprints or short intervals. Improves the maximum amount of oxygen your body can utilize.
Factors Affecting Heart Rate
Keep in mind that factors such as heat, humidity, dehydration, caffeine intake, and lack of sleep can elevate your heart rate (cardiac drift). If your heart rate is 5-10 beats higher than normal for the same pace, consider slowing down or hydrating.