HTML.form.guide

BMR (Basal Metabolic Rate) calculation HTML sample code - simple calculation widget HTML code with live demo

HTML calculation Javascript calculation BMR calculator code

BMR stands for Basal Metabolic Rate, which refers to the amount of energy or calories your body burns while at rest, performing basic functions such as breathing, circulation, and maintaining body temperature.

In other words, BMR is the minimum amount of energy your body needs to function properly without any additional physical activity. It’s the energy required to keep organs functioning and the body alive.

BMR is affected by several factors, including age, sex, height, weight, and body composition.

Calculating BMR

The most commonly used formula to calculate BMR is the Harris-Benedict equation, which takes into account the age, sex, height, and weight. The formula varies slightly for men and women:

For men: BMR = 88.362 + (13.397 x weight in kg) + (4.799 x height in cm) - (5.677 x age in years)

For women: BMR = 447.593 + (9.247 x weight in kg) + (3.098 x height in cm) - (4.330 x age in years)

Here’s a sample JavaScript function that calculates BMR using the Harris-Benedict equation:

function calculateBMR(sex, weight, height, age) {
  if (sex === 'male') {
    return 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
  } else if (sex === 'female') {
    return 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
  } 
}

Explanation of the function code:

  • The function takes four parameters: sex (string), weight (number), height (number), and age (number).

  • The function uses an if-else statement to check the input for sex. If the input is ‘male’, the function uses the Harris-Benedict equation for men to calculate BMR. If the input is ‘female’, the function uses the Harris-Benedict equation for women.

  • The function returns the calculated BMR value as a number

Adding a BMR widget to your website for lead capture

If you want to promote a health website, you can use a BMR calculation widget to generate leads for their business in a few ways:

  • Offer personalized nutrition and fitness plans: Once users have calculated their BMR, the health website can offer personalized nutrition and fitness plans tailored to their needs. Users who are interested in this service can enter their email address or sign up for a newsletter to receive additional information and resources.

  • Provide a free trial: The health website can offer a free trial of their nutrition and fitness plans for a limited time. Users who sign up for the trial can enter their email address and receive additional information and resources. This can encourage users to try the service and potentially become paying customers.

  • Promote special offers or discounts: The health website can offer special promotions or discounts on their nutrition and fitness plans to users who have calculated their BMR. Users who are interested in the offer can enter their email address or sign up for a newsletter to receive additional information and resources.

  • Provide additional resources: The health website can offer additional resources related to nutrition and fitness, such as healthy recipes, workout plans, or articles on related topics. Users who are interested in these resources can enter their email address or sign up for a newsletter to receive more information.

In each of these scenarios, your health website can use the BMR calculation widget as a lead magnet to encourage users to provide their email address or sign up for a newsletter. This allows the website to build a list of potential customers who are interested in their nutrition and fitness plans, and can be targeted with additional offers and promotions in the future.

Building a BMR (Basal Metabolic Rate) calculation widget can be a great way to enhance your health website and provide your users with a useful tool for calculating their daily calorie needs. In this article, we’ll provide step-by-step instructions for building a BMR calculation widget using HTML and the Bootstrap framework for styling.

Step 1: Set up the HTML form

To begin, create a new HTML file and set up the basic structure of the page. Within the <body> tag, add a <div> with a class of “container”. Inside this <div>, add a <form> element with an ID of “bmr-form”.

Next, add input fields for the user to enter their age, height, weight, and sex. You can use the <input> tag with a type of “number” to create fields that only accept numeric input. Here’s an example:

<div class="container">
  <form id="bmr-form">
    <div class="form-group">
      <label for="age">Age:</label>
      <input type="number" class="form-control" id="age" name="age" required>
    </div>
    <div class="form-group">
      <label for="height">Height (cm):</label>
      <input type="number" class="form-control" id="height" name="height" required>
    </div>
    <div class="form-group">
      <label for="weight">Weight (kg):</label>
      <input type="number" class="form-control" id="weight" name="weight" required>
    </div>
    <div class="form-group">
      <label for="gender">Gender:</label><br>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked>
        <label class="form-check-label" for="male">Male</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" id="female" value="female">
        <label class="form-check-label" for="female">Female</label>
      </div>
    </div>
    
    <div id="result my-5">
      Your BMR is : <span class="text-success font-weight-bold" r-calc="calculateBMR"></span> 
      Calories per day.
    </div>
  </form>
</div>

Step 2: Create the JavaScript function

Now we’ll create a JavaScript function that calculates the user’s BMR based on their input. Add the following code to your HTML file, preferably at the bottom of the <body> tag:

<script>
 function calculateBMR({gender, weight, height, age}) {
  let res =0
  if (gender === 'male') {
    res = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
  } else if (gender === 'female') {
    res= 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
  } 
  return Math.round(res*100)/100
}
</script>

This function takes the input values from the form, calculates the user’s BMR using the Harris-Benedict equation, and returns the result.

Using NittiJS for calculations

NittiJS is a little calculation utility library that simplifies our code. In this case, we are providing the name of the calculation function in the r-calc attribute.The function takes the values from the form as input, calculates and returns the results. The advantage of using NittiJS is that changing the input automatically calculates the result.

Demo:

See the Pen Calculate age HTML Code (Using NittiJS)

Extending the BMR calculation form to be a lead capture form

Let’s add a few fields to the form so that if the user wishes to join, they can.

See the Pen BMR Calculation HTML Code (Using NittiJS) by Prasanth (@prasanthmj) on CodePen.

See Also

Categories