Create BMI_calculator.html

2 years ago · fc524d117d
parent 08b771c863
commit fc524d117d
1 changed files with 73 additions and 0 deletions
--- a/BMI_calculator.html
+++ b/BMI_calculator.html
@ -0,0 +1,73 @@
 //This file contains code for a Body Mass Index calculator
 //this has been created using HTML,CSS and JS.
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>body mass index</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
 <style>
    .container{
     position: relative;
     max-width: 330px;
     width: 100%;
    }
    .card{
        margin-top: 70px;
    }
    body{
        background: rgb(41, 44, 44);
    }
    .btn{
        background: rgb(26, 74, 92);
    }
 </style>
 <body>
     <div class="container">
        <div class="card">
            <div class="card-header">BMI calculator</div>
            <div class="card-body">
                <form class="w-50 m-auto" onsubmit="return false">
                    <div class="form-group">
                        <label>weight:</label>
                        <input type="number" name="" id="weight" class="form-control" placeholder="weight in kg" required>
                    </div>
                    <div class="form-group">
                        <label>height:</label>
                        <input type="number" name="" id="height" class="form-control" placeholder="height in ft">
                    </div>
                    <div class="form-group">
                        <label>BMI </label>
                        <input type="number" name="" id="bmivalue" class="form-control">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success" onclick="getbmi()">
                        get BMI</button>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center">for a healthy body BMI should be 19 to 25</div>
        </div>
     </div>
     <script>
        function getbmi(){
        var weight = document.getElementById('weight').value;
        var height = document.getElementById('height').value;
        height=height*12;
        height=height*0.025;
        var newbmivalue=weight/(height*height);
        newbmivalue=Math.round(newbmivalue);
        document.getElementById('bmivalue').value=newbmivalue;
        }
     </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </body>
 </html>