JavaScript BMI Calculator Project with Source Code

BMI Calculator JavaScript

Get the complete source code of JavaScript BMI Calculator mini project programmed using HTML, CSS and JavaScript. To use the BMI calculator, input your height (in centimeters) and weight (in kilograms).

You can directly download the project here:

Download Project

Or simple view the source code below:

Page Contents
index.html
style.css
script.js

index.html

<!--
    BMI Calculator
    This code was uploaded at tetrageek.com
    For more amazing programming projects you can visit tetrageek.com/programming 
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>BMI Calculator</title>
</head>

<body>
    <div id="container">
        <img src="BMI-icon.png" alt="BMI Icon" id="icon">
        <h1>BMI Calculator</h1>
        <form>
            <p><label>Height in CM: </label><input type="text" id="height"></p>
            <p><label>Weight in KG: </label><input type="text" id="weight"></p>
            <button>Calculate</button>
            <div id="results"></div>
            <div id="message"></div>

            <div id="weight-guide">
                <h3>BMI Weight Guide</h3>
                <p>Under Weight = Less than 18.6</p>
                <p>Normal Range = 18.6 and 24.9</p>
                <p>Overweight = Greater than 24.9</p>
            </div>
        </form>
    </div>

    <p id="credits">For more codes visit <a href="https://www.tetrageek.com/programming"
            target="_blank">tetrageek.com/programming</a></p>
</body>
<script src="script.js"></script>

</html>

style.css

body {
    margin: 200px;
    margin-top: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    align-items: center;
}


#container {
    background-color: white;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    box-shadow: 0px 0px 10px 2px rgb(135, 132, 132);
    border-radius: 5px;
}

#icon {
    width: 80px;
    margin-top: 30px;
}

#height {
    width: 150px;
    height: 25px;
    margin-top: 10px;
}

#weight {
    width: 150px;
    height: 25px;
}

#weight-guide {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: blue;
    color: white;
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
}

#results {
    font-size: large;
    margin-top: 20px;
    font-weight: bold;
}

#message {
    font-size: large;
    color: red;
}

button {
    width: 150px;
    height: 35px;
    margin-top: 10px;
    border-radius: 2px;
    border-style: none;
    background-color: blue;
    color: #fff;
    font-size: 20px;
}

button:active {
    border: 2px solid blue;
    background-color: white;
    color: blue;
}

#credits {
    margin-top: 50px;
    font-size: small;
}

script.js

const form = document.querySelector('form');
let message = document.getElementById("message");

form.addEventListener('submit', function (e) {
    e.preventDefault();

    const height = parseInt(document.querySelector('#height').value);
    const weight = parseInt(document.querySelector('#weight').value);
    const results = document.querySelector('#results');

    if ((height === '') || (height < 0) || (isNaN(height))) {
        results.innerHTML = "Please provide a valid height";

    } else if (weight === '' || weight < 0 || isNaN(weight)) {
        results.innerHTML = "Please provide a valid weight";
    } else {
        //calculate BMI
        const bmi = (weight / ((height * height) / 10000)).toFixed(2);

        if (bmi < 18.6) {
            message.textContent = "You are underweight";
        }
        else if (bmi >= 18.6 && bmi < 24.6) {
            message.textContent = "You have a normal BMI";
        }
        else {
            message.textContent = "You are overweight";
        }
        //display the results
        results.innerHTML = "Your BMI = " + `<span>${bmi}</span>`;
    }

});

Have any recommendations or questions related to the code? Comment below and tell us your thoughts. We would be delighted to hear them.

Leave a Reply