<div id="fitness-calculators">

    <h3>BMI Calculator</h3>
    <label for="bmi-weight">Weight (kg):</label>
    <input type="number" id="bmi-weight">
    <label for="bmi-height">Height (cm):</label>
    <input type="number" id="bmi-height">
    <button onclick="calculateBMI()">Calculate BMI</button>
    <p id="bmi-result"></p>

    <h3>BFP (Body Fat Percentage) Calculator</h3>
    <label for="bfp-weight">Weight (kg):</label>
    <input type="number" id="bfp-weight">
    <label for="bfp-height">Height (cm):</label>
    <input type="number" id="bfp-height">
    <label for="bfp-age">Age:</label>
    <input type="number" id="bfp-age">
    <label for="bfp-gender">Gender:</label>
    <select id="bfp-gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    <button onclick="calculateBFP()">Calculate BFP</button>
    <p id="bfp-result"></p>

    <h3>Energy Expenditure Calculator</h3>
    <label for="energy-weight">Weight (kg):</label>
    <input type="number" id="energy-weight">
    <label for="energy-height">Height (cm):</label>
    <input type="number" id="energy-height">
    <label for="energy-age">Age:</label>
    <input type="number" id="energy-age">
    <label for="energy-gender">Gender:</label>
    <select id="energy-gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    <label for="activity-level">Activity Level:</label>
    <select id="activity-level">
        <option value="1.2">Sedentary</option>
        <option value="1.375">Lightly Active</option>
        <option value="1.55">Moderately Active</option>
        <option value="1.725">Very Active</option>
        <option value="1.9">Super Active</option>
    </select>
    <button onclick="calculateEnergyExpenditure()">Calculate Energy Expenditure</button>
    <p id="energy-result"></p>

</div>

<script>
    function calculateBMI() {
        const weight = document.getElementById('bmi-weight').value;
        const height = document.getElementById('bmi-height').value / 100;
        const bmi = (weight / (height * height)).toFixed(2);
        document.getElementById('bmi-result').innerText = "Your BMI is: " + bmi;
    }

    function calculateBFP() {
        const weight = document.getElementById('bfp-weight').value;
        const height = document.getElementById('bfp-height').value / 100;
        const age = document.getElementById('bfp-age').value;
        const gender = document.getElementById('bfp-gender').value;

        const bmi = (weight / (height * height)).toFixed(2);
        let bfp;

        if (gender === "male") {
            bfp = (1.20 * bmi + 0.23 * age - 16.2).toFixed(2);
        } else {
            bfp = (1.20 * bmi + 0.23 * age - 5.4).toFixed(2);
        }

        document.getElementById('bfp-result').innerText = "Your BFP is: " + bfp + "%";
    }

    function calculateEnergyExpenditure() {
        const weight = document.getElementById('energy-weight').value;
        const height = document.getElementById('energy-height').value;
        const age = document.getElementById('energy-age').value;
        const gender = document.getElementById('energy-gender').value;
        const activityLevel = document.getElementById('activity-level').value;

        let bmr;

        if (gender === "male") {
            bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
        } else {
            bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
        }

        const tdee = (bmr * activityLevel).toFixed(2);
        document.getElementById('energy-result').innerText = "Your Energy Expenditure is: " + tdee + " calories/day";
    }
</script>