Simple BMI Calculator in Javascript

Simple BMI Calculator in Javascript & HTML

by

In this article you will learn how to create a simple BMI calculator using HTML, CSS and JavaScript. If you are a beginner and want to create a JavaScript BMI calculator then this article will help you completely. Here I have given step by step explanation and required source code.

A BMI (Body Mass Index) calculator in JavaScript is a web-based application that allows users to input their weight and height, and then calculates and displays their BMI based on these inputs. BMI is a commonly used metric to assess whether an individual has a healthy body weight relative to their height.

The formula for BMI is: BMI= {(height(m)) / weight(kg)}

BMI Calculator using HTML, CSS, JavaScript

Body Mass Index (BMI) is a widely used metric to assess whether an individual has a healthy body weight relative to their height. 

Creating a simple BMI calculator using JavaScript and HTML is an excellent beginner’s project for those looking to delve into web development. In this article, we’ll guide you through the process of building a straightforward BMI calculator that users can interact with on a web page.

See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.

As you can see on the web page I have created a box with two sliders which are mainly for height and weight input which I have created using html’s input function. Then there is a display where you can see your BMI generated.

BMI Calculator HTML Code

Let’s start by setting up the basic HTML structure. Create an HTML file and include the following code. 

Copy Text 
    <div class="container">
        <div class="row">
            <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
            <span id="weight-val">20 kg</span>
        </div>
        <div class="row">
            <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
            <span id="height-val">100 cm</span>
        </div>

        <p id="result">20.0</p>
        <p id="category">Normal weight</p>
    </div>

Design BMI Calculator with CSS

You can enhance the visual appeal of your BMI calculator by adding some basic styles. Create a CSS file and include the following code.

Copy Text 
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #61d954,
        #2ebf75
    );
}
.container{
    background-color: #ffffff;
    padding: 40px 30px;
    width: 50%;
    min-width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
}
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.row span{
    font-weight: 500;
}
input[type="range"]{
    width: 70%;
    height: 3.5px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #dcdcdc;
    border-radius: 3px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: #1c1c1c;
    border-radius: 50%;
    cursor: pointer;
}
#result{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: #0be881;
}
#category{
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
}

BMI Calculator JavaScript Code

Now, let’s create the JavaScript file (script.js) to handle the BMI calculation.

Copy Text 
function calculate() {
    var bmi;
    var result = document.getElementById("result");

    // Get the weight input and display it
    var weight = parseInt(document.getElementById("weight").value);
    document.getElementById("weight-val").textContent = weight + " kg";

    // Get the height input and display it
    var height = parseInt(document.getElementById("height").value);
    document.getElementById("height-val").textContent = height + " cm";

    // Calculate BMI using the formula: BMI = weight / (height/100)^2
    bmi = (weight / Math.pow((height / 100), 2)).toFixed(1);
    result.textContent = bmi;

    // Determine BMI category and assign color to the result
    if (bmi < 18.5) {
        category = "Underweight";
        result.style.color = "#ffc44d"; // Yellow color
    } else if (bmi >= 18.5 && bmi <= 24.9) {
        category = "Normal Weight";
        result.style.color = "#0be881"; // Green color
    } else if (bmi >= 25 && bmi <= 29.9) {
        category = "Overweight";
        result.style.color = "#ff884d"; // Orange color
    } else {
        category = "Obese";
        result.style.color = "#ff5e57"; // Red color
    }

    // Display the BMI category
    document.getElementById("category").textContent = category;
}

Congratulations! You’ve successfully created a simple BMI calculator using JavaScript and HTML. This project is a great starting point for those new to web development, providing hands-on experience with basic HTML structure, JavaScript functions, and CSS styling.

Source Code

Here’s a simple example of how you can create a BMI calculator using HTML and JavaScript:


<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
</style>


<h1>BMI Calculator</h1>

<label for=”height”>Height (cm): </label>
<input type=”number” id=”height” placeholder=”Enter your height in centimeters”><br>

<label for=”weight”>Weight (kg): </label>
<input type=”number” id=”weight” placeholder=”Enter your weight in kilograms”><br>

<button onclick=”calculateBMI()”>Calculate BMI</button>

<h2>Your BMI is: <span id=”result”></span></h2>

<script>
function calculateBMI() {
// Get user input
var heightInput = document.getElementById(“height”).value;
var weightInput = document.getElementById(“weight”).value;

// Check if the inputs are valid
if (heightInput === “” || weightInput === “” || heightInput <= 0 || weightInput <= 0) {
alert(“Please enter valid values for height and weight.”);
return;
}

// Calculate BMI
var height = parseFloat(heightInput);
var weight = parseFloat(weightInput);
var bmi = weight / ((height / 100) * (height / 100));

// Display the result
document.getElementById(“result”).textContent = bmi.toFixed(2);
}
</script>

Below is an example of a simple and clean BMI calculator designed using HTML and JavaScript.

<div id=”calculator”>
<h1>BMI Calculator</h1>

<label for=”height”>Height (cm): </label>
<input type=”number” id=”height” placeholder=”Enter your height in centimeters”>

<label for=”weight”>Weight (kg): </label>
<input type=”number” id=”weight” placeholder=”Enter your weight in kilograms”>

<button onclick=”calculateBMI()”>Calculate BMI</button>

<div id=”result”></div>
</div>

<script>
function calculateBMI() {
var heightInput = document.getElementById(“height”).value;
var weightInput = document.getElementById(“weight”).value;

if (heightInput === “” || weightInput === “” || heightInput <= 0 || weightInput <= 0) {
alert(“Please enter valid values for height and weight.”);
return;
}

var height = parseFloat(heightInput);
var weight = parseFloat(weightInput);
var bmi = weight / ((height / 100) * (height / 100));

document.getElementById(“result”).innerHTML = “Your BMI is: ” + bmi.toFixed(2);
}
</script>

Leave a Comment

Home
Menu
Instagram
Search