bmi-calcuator with html css and js file

3 years ago · 9954b6a066
parent 120204995f
commit 9954b6a066
3 changed files with 96 additions and 0 deletions
--- a/9-bmi-calculator/index.html
+++ b/9-bmi-calculator/index.html
@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Calculator with JavaScript</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div class="wrapper">
        <p>Height in CM:
            <input type="text" id="height"><br><span id="height_error"></span>
        </p>
        <p>Weight in KG:
            <input type="text" id="weight"><br><span id="weight_error"></span>
        </p>
        <button id="btn">Calculate</button>
        <p id="output"></p>
    </div>
    <script src="script.js" charset="utf-8"></script>
 </body>
 </html>
--- a/9-bmi-calculator/script.js
+++ b/9-bmi-calculator/script.js
@ -0,0 +1,37 @@
 let button = document.getElementById('btn');
 button.addEventListener('click', () => {
    const height = parseInt(document.getElementById('height').value);
    const weight = parseInt(document.getElementById('weight').value);
    const result = document.getElementById('output');
    let height_status=false, weight_status=false;
    if(height === '' || isNaN(height) || (height <= 0)){
        document.getElementById('height_error').innerHTML = 'Please provide a valid height';
    }else{
        document.getElementById('height_error').innerHTML = '';
        height_status=true;
    }
    if(weight === '' || isNaN(weight) || (weight <= 0)){
        document.getElementById('weight_error').innerHTML = 'Please provide a valid weight';
    }else{
        document.getElementById('weight_error').innerHTML = '';
        weight_status=true;
    }
    if(height_status && weight_status){
        const bmi = (weight / ((height*height)/10000)).toFixed(2);
        if(bmi < 18.6){
            result.innerHTML = 'Under weight : ' + bmi;
        }else if(bmi >= 18.6 && bmi < 24.9){
            result.innerHTML = 'Normal : ' + bmi;
        }else{
            result.innerHTML = 'Over weight : ' + bmi;
        }
    }else{
        alert('The form has errors');
        result.innerHTML = '';
    }
 });
--- a/9-bmi-calculator/style.css
+++ b/9-bmi-calculator/style.css
@ -0,0 +1,33 @@
 body{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, #83a4d4, #b6fbff);
 }
 span{
    color: red;
 }
 .wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    padding: 15px;
    width: 50%;
    background: black;
    border-radius: 5px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 }
 input{
    outline: none;
    border: none;
    padding: 5px;
 }
 button{
    color: white;
    padding: 10px;
    border: 2px solid white;
    background: black;
    display: block;
    margin-top: 10%;
    cursor: pointer;
 }