BMI Calculator Template
<?php
/*
Template Name: BMI Calculator Template
*/
get_header();
?>
<style>
/* Form Styles */
.bmi-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.bmi-form h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.bmi-form label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}
.bmi-form input[type="number"],
.bmi-form select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
color: #333;
}
.bmi-form button {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
.bmi-result {
margin-top: 20px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #333;
}
.bmi-info {
margin-top: 20px;
font-size: 14px;
color: #666;
}
.bmi-faqs {
margin-top: 20px;
font-size: 14px;
color: #666;
}
.bmi-faqs h3 {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
}
.bmi-faqs p {
margin-bottom: 10px;
}
</style>
<div class="bmi-form">
<h2>BMI Calculator</h2>
<form id="bmi-form">
<div>
<label for="age">Age:</label>
<input type="number" id="age" required>
</div>
<div>
<label for="gender">Gender:</label>
<select id="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div>
<label for="height">Height:</label>
<input type="number" id="height" required>
<select id="height-unit">
<option value="cm">cm</option>
<option value="ft">ft</option>
</select>
</div>
<div>
<label for="weight">Weight:</label>
<input type="number" id="weight" required>
<select id="weight-unit">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
</div>
<button type="submit">Calculate BMI</button>
</form>
<div class="bmi-result" id="bmi-result"></div>
<div class="bmi-info" id="bmi-info"></div>
<div class="bmi-faqs">
<h3>Frequently Asked Questions (FAQs)</h3>
<p><strong>Q: What is BMI?</strong></p>
<p>A: BMI stands for Body Mass Index. It is a numerical value of a person's weight in relation to their height. It is commonly used to assess whether a person has a healthy body weight.</p>
<p><strong>Q: How is BMI calculated?</strong></p>
<p>A: BMI is calculated by dividing a person's weight in kilograms by the square of their height in meters.</p>
<p><strong>Q: What is a healthy BMI range?</strong></p>
<p>A: A BMI between 18.5 and 24.9 is generally considered to be within the healthy weight range for adults.</p>
<p><strong>Q: Is BMI an accurate measure of body fat?</strong></p>
<p>A: While BMI provides a rough estimate of body fat, it does not take into account factors such as muscle mass and distribution of fat. Therefore, it may not always accurately reflect an individual's body composition.</p>
<p><strong>Q: What are the limitations of BMI?</strong></p>
<p>A: BMI does not consider factors such as muscle mass, bone density, and overall body composition. It is important to remember that BMI is just one tool among many for assessing health and that individual circumstances can vary.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var bmiForm = document.getElementById('bmi-form');
var resultContainer = document.getElementById('bmi-result');
var infoContainer = document.getElementById('bmi-info');
bmiForm.addEventListener('submit', function(event) {
event.preventDefault();
// Get input values
var age = parseInt(document.getElementById('age').value);
var gender = document.getElementById('gender').value;
var height = parseFloat(document.getElementById('height').value);
var weight = parseFloat(document.getElementById('weight').value);
var heightUnit = document.getElementById('height-unit').value;
var weightUnit = document.getElementById('weight-unit').value;
// Convert height and weight to metric units if US units are selected
if (heightUnit === 'ft') {
height *= 30.48; // 1 ft = 30.48 cm
}
if (weightUnit === 'lb') {
weight *= 0.453592; // 1 lb = 0.453592 kg
}
// Calculate BMI
var bmi = weight / Math.pow(height / 100, 2);
// Display the result
var resultText = 'BMI: ' + bmi.toFixed(2);
resultContainer.textContent = resultText;
// Display interpretation based on BMI and gender
var interpretation = '';
if (gender === 'male') {
if (bmi < 18.5) {
interpretation = 'Underweight';
} else if (bmi >= 18.5 && bmi < 24.9) {
interpretation = 'Normal weight';
} else if (bmi >= 25 && bmi < 29.9) {
interpretation = 'Overweight';
} else {
interpretation = 'Obese';
}
} else if (gender === 'female') {
if (bmi < 18.5) {
interpretation = 'Underweight';
} else if (bmi >= 18.5 && bmi < 24.9) {
interpretation = 'Normal weight';
} else if (bmi >= 25 && bmi < 29.9) {
interpretation = 'Overweight';
} else {
interpretation = 'Obese';
}
}
var infoText = 'Interpretation: ' + interpretation;
infoContainer.textContent = infoText;
});
});
</script>
<?php get_footer(); ?>
Post a Comment