How to Put A TDEE Calculator on My Site

What is TDEE?

Total Daily Energy Expenditure (TDEE) is the total number of calories a person burns in a day. It includes Basal Metabolic Rate (BMR), the calories burned at rest, plus calories burned through physical activity. TDEE helps determine how many calories you need to maintain, lose, or gain weight.

The BMR formula varies by gender:

• For men: BMR = 88.362 + (13.397 × weight in kg) + (4.799 × height in cm) - (5.677 × age in years)
• For women: BMR = 447.593 + (9.247 × weight in kg) + (3.098 × height in cm) - (4.330 × age in years)

Why Add a TDEE Calculator to Your Site?

Adding a TDEE calculator to your site offers several benefits:

• Engagement: Provides an interactive tool that visitors can use immediately.
• Authority: Demonstrates expertise in health and nutrition topics.
• Conversion: Can lead visitors to related content or products.
• SEO: Helps with local search rankings for health-related queries.

How to Implement a TDEE Calculator

Step 1: Choose Implementation Method

You can implement a TDEE calculator using:

1. JavaScript: For a custom solution on your site.
2. Embedded Widget: Third-party services like Calculator.net or Healthline.
3. Iframe: Embedding a calculator from another site.

Step 2: Design the Calculator

Key elements to include:

• Gender selection (radio buttons)
• Age input (number field)
• Height input (with unit selection)
• Weight input (with unit selection)
• Activity level dropdown
• Calculate button
• Result display area

Step 3: Add the Code

See the code examples section for implementation details.

Code Examples

HTML Structure

<div class="tdee-calculator">
    <h2>TDEE Calculator</h2>
    <form id="tdeeForm">
        <div>
            <label>Gender:</label>
            <input type="radio" name="gender" value="male" checked> Male
            <input type="radio" name="gender" value="female"> Female
        </div>
        <div>
            <label for="age">Age (years):</label>
            <input type="number" id="age" min="1" max="120" value="30">
        </div>
        <div>
            <label for="height">Height (cm):</label>
            <input type="number" id="height" min="50" max="250" value="170">
        </div>
        <div>
            <label for="weight">Weight (kg):</label>
            <input type="number" id="weight" min="20" max="300" value="70">
        </div>
        <div>
            <label for="activity">Activity Level:</label>
            <select id="activity">
                <option value="1.2">Sedentary</option>
                <option value="1.375">Lightly active</option>
                <option value="1.55" selected>Moderately active</option>
                <option value="1.725">Very active</option>
                <option value="1.9">Extra active</option>
            </select>
        </div>
        <button type="button" id="calculateBtn">Calculate</button>
        <button type="reset" id="resetBtn">Reset</button>
    </form>
    <div id="result" class="oc-result-panel">
        <h3>Your Results</h3>
        <p>BMR: <span id="bmrResult">0</span> calories/day</p>
        <p>TDEE: <span id="tdeeResult">0</span> calories/day</p>
    </div>
</div>

JavaScript Function

function calculateTDEE() {
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const age = parseInt(document.getElementById('age').value);
    const height = parseInt(document.getElementById('height').value);
    const weight = parseInt(document.getElementById('weight').value);
    const activity = parseFloat(document.getElementById('activity').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 * activity;

    document.getElementById('bmrResult').textContent = Math.round(bmr);
    document.getElementById('tdeeResult').textContent = Math.round(tdee);
}

document.getElementById('calculateBtn').addEventListener('click', calculateTDEE);
document.getElementById('resetBtn').addEventListener('click', function() {
    document.getElementById('tdeeForm').reset();
    document.getElementById('bmrResult').textContent = '0';
    document.getElementById('tdeeResult').textContent = '0';
});

Best Practices

1. Keep It Simple

Focus on the essential inputs and provide clear instructions.

2. Mobile Optimization

Ensure the calculator works well on all devices, especially mobile.

3. Clear Results

Present results in an easy-to-understand format with explanations.

4. Integration

Place the calculator in a logical location on your site, such as alongside nutrition or fitness content.

5. Updates

Keep the calculator current with any changes to the TDEE formula.