Understanding your target heart rate zone is crucial for effective cardiovascular exercise. It helps ensure you're exercising at an intensity that provides the most benefit without overexerting yourself. The general guidelines are based on your maximum heart rate, which is typically estimated by subtracting your age from 220.
function calculateTargetHeartRate() {
var ageInput = document.getElementById("age");
var intensityInput = document.getElementById("intensity");
var resultDiv = document.getElementById("result");
var age = parseFloat(ageInput.value);
var intensity = parseFloat(intensityInput.value);
if (isNaN(age) || age <= 0) {
resultDiv.innerHTML = "Please enter a valid age.";
return;
}
if (isNaN(intensity) || intensity 100) {
resultDiv.innerHTML = "Please enter a valid intensity percentage between 1 and 100.";
return;
}
// Calculate Maximum Heart Rate (MHR)
var maxHeartRate = 220 – age;
// Calculate Target Heart Rate
var targetHeartRate = maxHeartRate * (intensity / 100);
resultDiv.innerHTML =
"Maximum Heart Rate (MHR): " + maxHeartRate.toFixed(0) + " bpm" +
"Your Target Heart Rate at " + intensity + "% intensity: " + targetHeartRate.toFixed(0) + " bpm";
}
.calculator-container {
font-family: sans-serif;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.calculator-container p {
color: #555;
line-height: 1.6;
margin-bottom: 20px;
}
.input-section {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.input-section label {
flex: 0 0 150px; /* Fixed width for labels */
font-weight: bold;
color: #444;
}
.input-section input[type="number"] {
flex-grow: 1; /* Allow input to take remaining space */
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
button {
display: block;
width: 100%;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
text-align: center;
}
#result p {
margin: 5px 0;
color: #333;
}
#result strong {
color: #007bff;
}