Body Fat Calculator Using JQuery and html, body fat calculator malayalam, body fat calculator at home, body fat calculator tamil, body fat calculator machine, body fat calculator guru mann, body fat calculator weighing machine, best body fat calculator, body fat percentage calculator machine, army body fat calculator, are online body fat calculator accurate, bmi bmr body fat calculator, body fat measure caliper, body fat calculation formula, body fat measuring device, how to use body fat calculator, fat calculator in body, body fat kaise measure kare, body fat loss calculator, body fat calculator machine handheld, body fat measure machine, body fat percentage calculator, body fat percentage formula, body fat percentage measure, body fat measuring scale, body fat calculator tape method, body fat measuring tape, body fat how to calculate, body fat calculator watch, body fat calculator with height weight neck javascript, Complete Code of Body Fat Percentage Calculator, Build a Body Fat Calculator in Browser Using HTML5 CSS3, Health calculator js, army body fat calculator, body fat percentage chart, body fat calculator github, body fat calculator metric, body fat calculator without measurements, body fat calculator height and weight, body fat calculator javascript code, how to calculate body fat percentage at home, body fat calculator javascript code, bmi calculator, bmi-calculator javascript github, body fat calculator github, bmi calculator html code download, bmi calculator if else javascript, embed bmi calculator, Navy Body Fat Calculator, The US Navy Body Fat Calculator, US Navy Calculator, navy body fat calculator formula, u.s. navy body fat calculator accuracy, body fat calculator without measurements, navy body fat formula excel, body fat calculator uk, navy body fat standards 2020, body fat calculator height and weight, ymca body fat calculator, BMI, BFP, BAI, Body Fat, Ideal weight, body fat calculator wordpress

Body Fat Calculator Using JQuery and html

Body Fat Calculator Using JQuery and html

In this tutorial, I am showing you how to create a body fat calculator using HTML and jquery.

1) Create a form of below fields:-


<div class="row">
<div class="col-md-10 mx-auto mt-5">
<div class="card">
<div class="card-body">
  <!-- Tab panes -->

<div class="tab-content">
<div id="home" class="container tab-pane active">
<div id="bodyFat" class="container tab-pane fade">

<div class="row">
<div class="col-md-6 col-xs-12">
<form id="fatcal">
<div class="form-group gender">
                <label>Gender</label>
                
                <input type="radio" name="fgender" class="fgender" value="male" checked> Male

                 <input type="radio" class="fgender" name="fgender" value="female"> Female
            </div>
<div class="form-group">
<div class="input-group mb-3">
                <label>Age</label>
                 
                  <input type="number" class="form-control" name="age" id="fAge" placeholder="Years" aria-label="Age" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group">
<div class="input-group mb-3">
                <label>Weight</label>
                 
                  <input type="number" id="fWeight" name="Weight" class="form-control" placeholder="Pounds" aria-label="Weight" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group">
<div class="input-group mb-3">
                <label>Height</label>
                 
                  <input type="number" id="fHeight" name="Height" class="form-control" placeholder="Feet" aria-label="Height" aria-describedby="basic-addon2" required="">
                  <input type="number" id="fHeightinch" name="Heightinch" class="form-control" placeholder="Inches" aria-label="Height" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group">
                <label>Neck</label>

<div class="input-group mb-3">
                  <input type="number" id="fNeck" name="Neck" class="form-control" placeholder="Feet" aria-label="Neck" aria-describedby="basic-addon2" required="">
                  <input type="number" id="fNeckinch" name="Neckinch" class="form-control" placeholder="Inches" aria-label="Neck" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group">
                <label>Waist</label>

<div class="input-group mb-3">
                  <input type="number" id="fWaist" name="fWaist" class="form-control" placeholder="Feet" aria-label="Waist" aria-describedby="basic-addon2" required="">
                  <input type="number" id="waistinch" name="fWaistinch" class="form-control" placeholder="Inches" aria-label="Waist" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group hideshow">
                <label>Hip</label>

<div class="input-group mb-3">
                  <input type="number" id="fHip" name="fHip" class="form-control" placeholder="Feet" aria-label="Hip" aria-describedby="basic-addon2" required="">
                  <input type="number" id="hipinch" name="fHipinch" class="form-control" placeholder="Inches" aria-label="Hip" aria-describedby="basic-addon2" required="">
</div>

</div>
<div class="form-group">
                <button type="button" class="btn btn-success" id="calculateBodyFat">Calculate</button>
            </div>

</form>

</div>
<div class="col-md-6 col-xs-12 table-responsive">
<div id="bodyFatRes"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
</div>

2) Add some style


<style>
    ul.nav.nav-pills {
    background: #2fa4e7;
    border-radius: 4px;
}
ul.nav.nav-pills li a {
    color: #fff;
}
ul.nav.nav-pills li a.active {
    background: #008fe2;
    color: #ffffff;
}
h6 {
    color:#333;
}
.form-group, {
    width: 100%;
}

button#calculateBodyFat {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    fill: #ffffff;
    color: #ffffff;
    background-color: #FFE;
    border-radius: 30px 30px 30px 30px;
    padding: 15px 45px 15px 45px;
    color: #21C2F0;
    margin-top: 20px;
}
.gender{
    text-align: center;
}
div#bodyFatRes {
    text-align: center;
}
.form-group {
    color: #000;
}
.alert.alert-failed.mt-5 {
    color: red;
    padding: 20px;
}
form#fatcal {
    text-align: center;
}
@media(max-width:746px){
    li.nav-item {
    display: block;
    width: 100%;
    text-align: center;
}
h3, .h3 {
    font-size: 1.3rem;
}
}
</style>

3) Add jquery library and below code snippet

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.5/math.min.js'></script>
<script>
jQuery(".hideshow").hide();
jQuery(".gender input").change(function(){
    if(jQuery(this).val() != "male"){
        jQuery(".hideshow").show();
    }
    else{
        jQuery(".hideshow").hide();
    }
})

//Body FAt Calculator
jQuery('#calculateBodyFat').click(function(e){

    var data = jQuery("#fatcal").serializeArray()
    console.log(data);

    // for (const key of data) {
    //         // console.log(count)
    //         if(key.value == ""){

    //           jQuery('#bodyFatRes').html('

<div class="alert alert-failed mt-5">
All field is required!

</div>
');
    //           return false;
    //         }

    //     }

    let gender = jQuery('input[name="fgender"]:checked').val();
    let age = jQuery('#fAge').val();
    let weight = jQuery('#fWeight').val();
    weight = weight/2.2046;

    let height = jQuery('#fHeight').val();
    height = height*12;
    let fHeightinch = jQuery('#fHeightinch').val();
    height = parseFloat(height)+parseFloat(fHeightinch);

    height = height*2.54;

    let neck = jQuery('#fNeck').val();

    neck = neck*12;

    let neckinch = jQuery('#fNeckinch').val();
    neck = parseFloat(neck)+parseFloat(neckinch);
    neck = neck*2.54;

    let waist = jQuery('#fWaist').val();
    waist = waist*12;
    let waistinch = jQuery('#waistinch').val();

    waist = parseFloat(waist)+parseFloat(waistinch);

    waist = waist*2.54;

    let hip = jQuery('#fHip').val();
    hip = hip*12;
    let hipinch = jQuery('#hipinch').val();
    hip = parseFloat(hip)+parseFloat(hipinch);

     hip = hip*2.54;
     console.log(weight,height,waist,neck,hip);
    let bfp = '';
    if(gender=='male'){
        bfp = 495/(1.0324 - 0.19077*Math.log10(waist-neck) + 0.15456*Math.log10(height)) - 450;
    }else{
        bfp = 163.205 * Math.log10(math.unit(waist, 'cm').toNumber('in') + math.unit(hip, 'cm').toNumber('in') - math.unit(neck, 'cm').toNumber('in')) - 97.684 * Math.log10(math.unit(height, 'cm').toNumber('in')) - 78.387;

    }

    jQuery('#bodyFatRes').html('

<div class="alert alert-success mt-5">
You body Fat Percentage is: <b>'+bfp+' %</b>

</div>
');
})
// return false;

</script>

Below is the demo of the Above code:-


Male Female



Post Created 59

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top