BMI Calculator Project Using JavaScript

Demo👀

How Do You Make A BMI Calculator Using JavaScrip!

1st Step :-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step :-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

<div class="container">
 <div id="lcol">
  <center>
  <div id="doc">
    
    <h1>
BMI Calculator</h1>
<form id="calcform" autocomplete="off">
      <div class="form-group grid">
         <label class="row ml-0">Units Type</label>
         <div class="btn-group btn-group-toggle row ml-0" data-toggle="buttons">
            <label class="btn btn-secondary active">
               <input type="radio" name="ut" id="ut-us" onchange="OnUnitUS()" value="u" checked>US/UK Units
            </label>
            <label class="btn btn-secondary">
               <input type="radio" name="ut" id="ut-metric" onchange="OnUnitMetric()" value="m">Metric Units
            </label>
         </div>
</div>
<div class="form-group">
         <label>Height</label>
         <div class="input-group" id="ftdiv">
            <input type="number" min="0" class="form-control form-control-lg" id="ft" placeholder="feet">
            <div class="input-group-append mr-2">
               <span class="input-group-text">ft</span>
            </div>
<input type="number" min="0" class="form-control form-control-lg" id="in" placeholder="inches">
            <div class="input-group-append">
               <span class="input-group-text">in</span>
            </div>
</div>
<div class="input-group" id="cmdiv">
            <input type="number" min="0" class="form-control form-control-lg" id="cm" placeholder="centimeters">
            <div class="input-group-append">
               <span class="input-group-text">cm</span>
            </div>
</div>
</div>
<div class="form-group">
         <label>Weight</label>
         <div class="input-group" id="lbdiv">
            <input type="number" min="0" class="form-control form-control-lg" id="lb" placeholder="pounds">
            <div class="input-group-append">
               <span class="input-group-text">lb</span>
            </div>
</div>
<div class="input-group" id="kgdiv">
            <input type="number" min="0" class="form-control form-control-lg" id="kg" placeholder="kilograms">
            <div class="input-group-append">
               <span class="input-group-text">kg</span>
            </div>
</div>
</div>
<div class="form-group">
         <button type="button" title="Calculate" onclick="OnCalc()" class="btn btn-success"><i class="material-icons">settings</i> Calculate</button>
         <button type="reset" title="Reset" onclick="OnReset()" class="btn btn-warning"><i class="material-icons">clear</i> Reset</button>
      </div>
<div class="form-group">
         <label for="bmi">BMI</label>
         <div class="input-group">
         <input type="number" min="0" class="form-control form-control-lg" id="bmi" readonly>
         <div class="input-group-append">
            <span class="input-group-text">kg/m<sup>2</sup></span>
         </div>
</div>
</div>
<div class="form-group">
         <label for="risk">BMI category</label>
         <input type="text" class="form-control form-control-lg" id="category" readonly>
      </div>
<div class="form-group">
         <label for="risk">Health risk</label>
         <input type="text" class="form-control form-control-lg" id="risk" readonly>
      </div>
</form>
</div>
</center>
</div>

3rd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <style>
   h1 { font-size:1.6rem; }
   h2 { font-size:1.4rem; }
   h3 { font-size:1.4rem; }
   h4 { font-size:1.2rem; }
   #wrapper td { padding:.75rem; }
   #calcform {
      padding:15px;
      background:#f9563a;
      border:1px solid #eee;
      border-radius:7px;
      max-width:500px;
   }
   #cmdiv, #kgdiv { display:none; }
   .btn i { vertical-align:middle; }
</style>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
   "use strict"
   var isMetric=false;
   window.onload = function() {
   };
   function OnReset()
   {
      $("#calcform .btn-group label").removeClass("active");
      $("#calcform .btn-group label:first-child").addClass("active");
   }
   function OnUnitMetric() {
      document.getElementById("ftdiv").style.display = "none";
      document.getElementById("lbdiv").style.display = "none";
      document.getElementById("cmdiv").style.display = "flex";
      document.getElementById("kgdiv").style.display = "flex";
      isMetric = true;
   }
   function OnUnitUS() {
      document.getElementById("ftdiv").style.display = "flex";
      document.getElementById("lbdiv").style.display = "flex";
      document.getElementById("cmdiv").style.display = "none";
      document.getElementById("kgdiv").style.display = "none";
      isMetric = false;
   }
   function OnCalc() {
      if( isMetric ) {
         var cm=document.getElementById("cm").value;
         var kg=document.getElementById("kg").value;
         if( cm=="" ) cm="0";
         if( kg=="" ) kg="0";
         cm=parseFloat(cm);
         kg=parseFloat(kg);
         var m=cm/100.0;
         var bmi=kg/(m*m);
         document.getElementById("bmi").value=bmi.toFixed(1);
      }
      else {
         var ft=document.getElementById("ft").value;
         var inch=document.getElementById("in").value;
         var lbs=document.getElementById("lb").value;
         if( ft=="" ) ft="0";
         if( inch=="" ) inch="0";
         if( lbs=="" ) lbs="0";
         ft=parseFloat(ft);
         inch=parseFloat(inch);
         lbs=parseFloat(lbs);
         inch+=12.0*ft;
         //var bmi=703.069*lbs/(inch*inch);
         var bmi=703*lbs/(inch*inch);
         document.getElementById("bmi").value=bmi.toFixed(1);
      }
      var risk="",cat="";
      if( bmi<18.5 ) { cat="Underweight"; risk="Malnutrition risk"; }
      else if( bmi<25 ) { cat="Normal weight"; risk="Low risk"; }
      else if( bmi<30 ) { cat="Overweight"; risk="Enchanced risk"; }
      else if( bmi<35 ) { cat="Moderately obese"; risk="Medium risk"; }
      else if( bmi<40 ) { cat="Severely obese"; risk="High risk"; }
      else if( bmi>=40 ) { cat="Very severely obese"; risk="Very high risk"; }
      document.getElementById("category").value = cat;
      document.getElementById("risk").value = risk;
   }
</script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

BMI Calculator Project Using JavaScript | Beginners

Demo👀

How Do You Make A BMI Calculator Using JavaScrip!

How To Download This Project

Project source code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

1Add

BMI Calculator Project Using JavaScript | Beginners

Demo👀

How Do You Make A BMI Calculator Using JavaScrip!

How To Download This Project

Project source code

BMI Calculator Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER