How to Create BMI Calculator using Javascript

#html #javascript #webdev #beginners

If you want to make BMI calculator using JavaScript then this tutorial will help you. Here I have shared a tutorial of a BMI calculator using JavaScript. BMI (Body Mass Index) is used to calculate the amount of mass in our body.

First I created a simple box on the webpage. In this box I have created all the information like heading, display and input slider.

Watch its live demo to learn how it works. I first created a heading using the h1 tag and designed it with CSS. Then he made a display in which all the information can be seen. In this display you can see the BMI and its status. In other words, the amount of BMI is more or less it will be shown through a text.

BMI Calculator using Javascript

Then I created two range sliders using the input function of HTML. The first slider to input weight and the second input slider to input your height. Weight will be input in kg and height will be input in cm.

By inputting these two information, your BMI can be seen in the automatic display. I used HTML CSS and JavaScript to build it. Designed Simple BMI Calculator with HTML and CSS and implemented by JavaScript.

1. Make a box and add a heading

First the basic structure of this BMI calculator was created. For this we have taken the help of HTML and CSS below. First I made a box and added a heading in it. HTML's h1 tag is used to create headings.



<div class="container">
  <h1>BMI Calculator</h1>

</div>

I have designed the webpage with the help of CSS below. Here the background color of the webpage is blue.



*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #046db9;
}

Now who made the box. Box width: 400px and height depends on the amount of content. I used white as the background color and box-shadow to make the box more attractive.

Then the headings are designed. The background of the heading has been used in Garo blue and the text color has been used in white. Font-size: 23px has been used for text-align: center to keep the text in the middle and to increase the size.



.container{
    background-color: #ffffff;
    padding: 30px 30px;
    width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
}
.container h1{
   background: #024b94;
   color: white;
   text-align: center;
   font-size: 23px;
   letter-spacing: 1px;
   margin-top: -30px;
   margin-left: -30px;
   margin-right: -30px;
   margin-bottom: 40px;
}

2. Create BMI result viewing area

Now we have created a display that will show the result of the calculation and a text. There is no specific size of the display it will depend on the amount of content.



<div class="display">
   <p id="result">20.0</p>
   <p id="category">Normal weight</p>
</div>



.display{
box-shadow: 0 0 20px rgba(0,139,253,0.25);
margin-bottom: 60px;
}

#result{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: #0be881;
}

#category{
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
}

3. Create range slider to input height and weight

Now it's time to create a range slider. Who created the first range slider using the HTML and CSS code below. I used type = "range" using HTML input to create slider. Here the minimum and maximum values are determined. This range is for slider weight input.



<div class="row">
   <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
   <span id="weight-val">20 kg</span>
</div>

I have designed some basics of slider with the help of CSS below. Here the slider is used width: 70% and height: 3.5px.



.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.row span{
    font-weight: 500;
}
input[type="range"]{
    width: 70%;
    height: 3.5px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #dcdcdc;
    border-radius: 3px;
    outline: none;
}

Now I have designed the thumbnail. Each range slider has a button that changes the value of the range. The following CSS code has been used to design this button. Border-radius is used to make this thumbnail width: 15px, height: 15px and round.



input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: #1c1c1c;
    border-radius: 50%;
    cursor: pointer;
}

Now I have made another slide to make a hairy anklet. It is made like this sea. Here minimum value 100 and maximum L250 are used. Flight No need to use any different code to design it because I have already added code to design here.



<div class="row">
  <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
  <span id="height-val">100 cm</span>
</div>

4. JavaScript of BMI Calculator

Above we have designed this JavaScript BMI Calculator complete with the help of HTML and CSS. However, it is not yet effective. You need JavaScript enabled to view it.

Below I have given all the JavaScript together and given the necessary explanations. Hopefully the following explanation will help you understand these JavaScripts.



function calculate(){
  //Need to determine the constant of some id functions.
    var bmi;
    var result = document.getElementById("result");
  //The value of the height slider
    var height = parseInt(document.getElementById("height").value);
  //The value of the weight slider
    var weight = parseInt(document.getElementById("weight").value);

  //The value of height and width should be displayed in the webpage using "textContent".
    document.getElementById("weight-val").textContent = weight + " kg";
    document.getElementById("height-val").textContent = height + " cm";

//Now I have added the formula for calculating BMI in "bmi"
    bmi = (weight / Math.pow( (height/100), 2 )).toFixed(1);
  //With the help of "textContent" we have arranged to display in the result page of BMI
    result.textContent = bmi;


  //Now we have to make arrangements to show the text


  //When the BMI is less than 18.5, you can see the text below
    if(bmi < 18.5){
        category = "Underweight 😒";
        result.style.color = "#ffc44d";
    }

  //If BMI is >=18.5 and <=24.9
    else if( bmi >= 18.5 && bmi <= 24.9 ){
        category = "Normal Weight 😍";
        result.style.color = "#0be881";
    }

  //If BMI is >= 25 and <= 29.9 
    else if( bmi >= 25 && bmi <= 29.9 ){
        category = "Overweight 😮";
        result.style.color = "#ff884d";
    }

  //If BMI is <= 30
    else{
        category = "Obese 😱";
        result.style.color = "#ff5e57";
    }
  //All of the above text is stored in "category".

//Now you have to make arrangements to display the information in the webpage with the help of "textContent"
    document.getElementById("category").textContent = category;
}

Hopefully with the help of the above tutorial you have learned how I created this BMI calculator using HTML CSS and JavaScript. If there is any difficulty then you can let me know by commenting.

Related Post: