How to calculate BMI with use simple JS

Form this tutorial you will find out how to calculate BMI

Let’s start ….

Step-1: HTML Code

<div class="calculate-form">
    <form class="form" id="form" onsubmit="return validateForm()">
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <input type="text" id="height" autocomplete="off" class="form-control" required data-error="Please Enter Height" placeholder="Height*">
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <input type="text" id="weight" autocomplete="off" class="form-control" required data-error="Please Enter Weight" placeholder="Weight*">
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <input type="text" id="age" autocomplete="off" class="form-control" required data-error="Please Enter Age" placeholder="Age*">
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <select class="form-select form-control">
                        <option selected>Select Gender*</option>
                        <option value="1" id="male">Male</option>
                        <option value="2" id="female">Female</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <select class="form-select form-control">
                        <option selected>Select an Activity Factor*</option>
                        <option value="1">Weight Lifting</option>
                        <option value="2">Organic Yoga</option>
                        <option value="3">Power Yoga</option>
                    </select>
                </div>
            </div>

            <div class="col-lg-12 col-md-12">
                <button type="submit" id="submit" class="default-btn">
                    Calculate
                </button>
            </div>
        </div>
    </form>

    <div class="bmi-result"></div>
    <div class="bmi-rating"></div>
</div>

Step-2: CSS Code

.calculate-form {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    background-color: var(--whiteColor);
    padding: 40px 30px;
    border-radius: 0;
    h2 {
        font-size: 30px;
        margin-bottom: 25px;
    }
    .form-group {
        margin-bottom: 20px;
        position: relative;
        label {
            color: var(--titleColor);
            margin-bottom: 15px;
        }
        .form-control {
            height: 50px;
            color: var(--bodyColor);
            border: none;
            background-color: var(--whiteColor);
            font-size: 15px;
            padding: 10px 20px;
            width: 100%;
            border-radius: 0;
            border: 1px dashed #e2e2e2;
            &::-webkit-input-placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder, &::placeholder {
                color: var(--bodyColor);
                transition: .6s;
            }
            &:focus {
                &::-webkit-input-placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder, &::placeholder {
                    color: transparent;
                }
            }
            &:focus {
                outline: none;
                box-shadow: none;
                border-color: var(--greenColor);
            }
        }
    }
    .default-btn {
        width: 100%;
        text-align: center;
    }
    .bmi-result {
        margin-top: 20px;
        color: var(--titleColor);
        font-weight: 600;
        span {
            color: var(--greenColor);
        }
    }
    .bmi-rating {
        margin-top: 10px;
        color: var(--titleColor);
        font-weight: 600;
        span {
            color: var(--greenColor);
        }
    }
}

Step-3: JS Code

<script>
        var age = document.getElementById("age");
        var height = document.getElementById("height");
        var weight = document.getElementById("weight");
        var male = document.getElementById("male");
        var female = document.getElementById("female");
        var form = document.getElementById("form");
        function validateForm(){
        if(age.value=='' || height.value=='' || weight.value=='' || (male.selected==false && female.selected==false )){
            alert("All fields are required!");
            document.getElementById("submit").removeEventListener("click", countBmi);
        }else{
            countBmi();
        }
        }
        document.getElementById("submit").addEventListener("click", validateForm);

        function countBmi(){
        var p = [age.value, height.value, weight.value];
        if(male.selected){
            p.push("male");
        }else if(female.selected){
            p.push("female");
        }
        form.reset();
        var bmi = Number(p[2])/(Number(p[1])/100*Number(p[1])/100);
            
        var result = '';
        if(bmi<18.5){
            result = 'Underweight';
            }else if(18.5<=bmi&&bmi<=24.9){
            result = 'Healthy';
            }else if(25<=bmi&&bmi<=29.9){
            result = 'Overweight';
            }else if(30<=bmi&&bmi<=34.9){
            result = 'Obese';
            }else if(35<=bmi){
            result = 'Extremely obese';
            }
        
            document.querySelector(
            ".bmi-result"
            ).innerHTML = `Weight Status :  <span id="comment">${result}</span>`;

            document.querySelector(
            ".bmi-rating"
            ).innerHTML = `BMI Rate :  <span id="comment">${parseFloat(bmi).toFixed(2)}</span>`;

            document.getElementById("submit").removeEventListener("click", countBmi);
            document.getElementById("submit").removeEventListener("click", validateForm);
        }
        document.getElementById("submit").addEventListener("click", countBmi);
</script>

 

Thanks! If you have any queries, please let me know in the comments section.

Leave a Reply

Your email address will not be published.