ADVERTISEMENT

Create BMI Calculator Using HTML,CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create BMI Calculator Using Html Css Javascript Code

 

ADVERTISEMENT

 

ADVERTISEMENT

 

Create BMI Calculator Using HTML,CSS & JavaScript
Create BMI Calculator Using HTML,CSS & JavaScript

 

ADVERTISEMENT

 

ADVERTISEMENT

 

Welcome To The Codewithrandom Blog. In This Article, We Learn How To Create A BMI Calculator Project. We Use HTML, CSS, And JavaScript For This BMI Calculator Source Code.

There are two ways to calculate BMI: manually or by entering the values into a BMI calculator and receiving the actual BMI. The formula will be the same in both cases, but manual bmi calculation is a time-consuming process, so we will create our own BMI Calculator to save time.

ADVERTISEMENT

There are some criteria that will help you determine which class you belong in, such as underweight, healthy, overweight, and obese. You can better understand it by looking at the chart below.

ADVERTISEMENT

BMI Chart

 

ADVERTISEMENT

Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For A BMI Calculator Source Code.

 

Code by nikolett_codes
Project Download Link Available Below
Language used HTML, CSS And JavaScript
External link / Dependencies No
Responsive YES
BMI Calculator Table

 

HTML Code For Bmi Calculator

 

<head>
  <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
</head>
<body>
  <h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex Calculator</h3>
<form class="form" id="form" onsubmit="return validateForm()">
<div class="row-one">
  <input type="text" class="text-input" id="age" autocomplete="off" required/><p class="text">Age</p>
  <label class="container">
  <input type="radio" name="radio" id="f"><p class="text">Female</p>
    <span class="checkmark"></span>
  </label>
  <label class="container">
  <input type="radio" name="radio" id="m"><p class="text">Male</p>
    <span class="checkmark"></span>
  </label>
  </div>

<div class="row-two">
<input type="text" class="text-input" id="height" autocomplete="off" required><p class="text">Height (cm)</p>
<input type="text" class="text-input" id="weight" autocomplete="off" required><p class="text">Weight (kg)</p>
</div>
<button type="button" id="submit">Submit</button>
</form>
</body>

 

ADVERTISEMENT

Structure of BMI Calculator:

ADVERTISEMENT

  • Using the <h3> tag we will give a heading to our BMI calculator
  • Now using the form tag we will create a form for taking the input from the user to calculate the BMI of the user.
  • Now inside our form using the input tag with type text we will add the age input for the user to enter the age.
  • Now we will create two radio button for choosing out the gender of the user .Using the input tag with type as “radio” we will create the bmi calculator.
  • Now we’ll make two inputs, one for the user’s height and the other for their weight, and then we’ll make a submit button using the button tag to submit all the information.

Below is the HTML code for the BMI Calculator Project. You can now view output without of JavaScript or CSS code. Then we create the source code for the BMI Calculator using CSS and Javascript.

ADVERTISEMENT

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

ADVERTISEMENT

Html Code Output Bmi Calculator

ADVERTISEMENT

 

 

Create BMI Calculator Using HTML,CSS & JavaScript
Create BMI Calculator Using HTML Code Preview

 

 

 

Css Code For Bmi Calculator

 

* {
    font-family: Quicksand;
    font-size: 16px;
    color: #333;
}
body {
    margin: 0;
    height: 100vh;
    padding: 0;
    border: 0;
    background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
}
.form {
    background-color: #fff;
    height: 240px;
    width: 450px;
    border-radius: 20px;
    margin: 20px auto 20px auto;
    display: block;
    border: solid 1px #289df6;
    box-shadow: 0 0 40px 0 #ddd;
}
.form:hover {
    box-shadow: 0 0 60px 0 #ccc;
    transition: 0.4s;
    transform: scale(1.02);
}
.row-one {
    padding: 20px;
}
.row-two {
    padding: 20px;
}
.text-input {
    width: 60px;
    height: 30px;
    border-radius: 10px;
    background-color: #dbeffe;
    border: none;
    outline: none;
    padding: 5px 10px;
    cursor: pointer;
}
.text-input:last-child {
    margin-bottom: 35px;
}
.text-input:hover {
    background-color: #cbe7fd;
}
#submit {
    border: none;
    border-radius: 10px;
    height: 40px;
    width: 140px;
    background-color: #289df6;
    color: #fff;
    margin: auto;
    display: block;
    outline: none;
    cursor: pointer;
}
#submit:hover {
    background-color: #0a8ef2;
}
.text {
    display: inline-block;
    margin: 5px 20px 5px 8px;
}
.row-one {
    padding: 30px 20px 15px 20px;
}
.row-two {
    padding: 15px 20px 30px 20px;
}
.container {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
}
.container input {
    position: absolute;
    opacity: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #dbeffe;
    border-radius: 50%;
}
.container:hover input ~ .checkmark {
    background-color: #cbe7fd;
}
.container input:checked ~ .checkmark {
    background-color: #289df6;
}
h1 {
    font-size: 30px;
    font-weight: 300;
    text-align: center;
    color: #289df6;
    padding-top: 15px;
    display: block;
}
h2 {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
}
h3 {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    padding: 15px;
}
h3 b {
    font-size: 32px;
    font-weight: 300;
    color: #289df6;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container input:checked ~ .checkmark:after {
    display: block;
}
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

 

Step1: Basic Styling:
First, we’ll use the universal selector to change the text’s font family to “Quicksand,” size to 16px, and colour to Dark Gray.
The padding, margin, and border will now be changed to “zero” using the body tag selector, and the background property will be used to produce a linear gradient using a combination of bright yellow and offwhite.
* {
    font-family: Quicksand;
    font-size: 16px;
    color: #333;
}

body {
    margin: 0;
    height: 100vh;
    padding: 0;
    border: 0;
    background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
}

Create BMI Calculator Using HTML,CSS & JavaScript

Step2: The background of our form will now be set to “white” using the class selector (.form), and the width and height will be set to “240 px” and “450 px,” respectively, using the height and property. We will set the border-radius to “20 px” using the border-radius property. The form’s display is set to “block,” and a solid 1 px border with a “light blue” border has also been added.

.form {
    background-color: #fff;
    height: 240px;
    width: 450px;
    border-radius: 20px;
    margin: 20px auto 20px auto;
    display: block;
    border: solid 1px #289df6;
    box-shadow: 0 0 40px 0 #ddd;
}

.form:hover {
    box-shadow: 0 0 60px 0 #ccc;
    transition: .4s;
    transform: scale(1.02);
}

.row-one {
    padding: 20px;
}

.row-two {
    padding: 20px;
}

Create BMI Calculator Using HTML,CSS & JavaScript

Step3: We will now style the form’s container and input fields. Using the class selector, we will change the display to “inline-block” and the position to “relative” (.container). Additionally, there is a 30px left padding and a “pointer” cursor type.

Using the tag selectors h1, h2, and h3, we will now set the font-size attribute to 30 px, 22 px, 24 px, and 32 px.

.container {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
  }
  
  .container input {
    position: absolute;
    opacity: 0;
  }
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #dbeffe;
    border-radius: 50%;
  }
  
  .container:hover input ~ .checkmark {
    background-color: #cbe7fd;
  }
  
  .container input:checked ~ .checkmark {
    background-color: #289df6;
  }
  
  h1 {
    font-size: 30px;
    font-weight: 300;
    text-align: center;
    color: #289df6;
    padding-top: 15px;
    display: block;
  }
  
  h2 {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
  }
  
  h3 {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    padding: 15px;
  }
  
  h3 b {
    font-size: 32px;
    font-weight: 300;
    color: #289df6;
  }
  
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

 

Now we have completed our css code section for bmi calculator,  here is our updated output css.

 

 

 

 

 

 

Html Css Bmi Calculator Output 

 

 

 

 

Create BMI Calculator Using HTML,CSS & JavaScript
Create BMI Calculator Using HTML,CSS Code Preview

 

 

 

Create BMI Calculator Using HTML,CSS & JavaScript
Create BMI Calculator Using HTML,CSS Code Preview

 

Now add javascript code for calculating BMI using BMI calculator.

Javascript Code For Bmi Calculator

 

var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");
function validateForm() {
    if (
        age.value == "" ||
        height.value == "" ||
        weight.value == "" ||
        (male.checked == false && female.checked == 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.checked) {
        p.push("male");
    } else if (female.checked) {
        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";
    }
    var h1 = document.createElement("h1");
    var h2 = document.createElement("h2");
    var t = document.createTextNode(result);
    var b = document.createTextNode("BMI: ");
    var r = document.createTextNode(parseFloat(bmi).toFixed(2));
    h1.appendChild(t);
    h2.appendChild(b);
    h2.appendChild(r);
    document.body.appendChild(h1);
    document.body.appendChild(h2);
    document.getElementById("submit").removeEventListener("click", countBmi);
    document
        .getElementById("submit")
        .removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);

 

using an if else statement, we will add that all of the fields inside the bmi calculator must be filled. Finally, using the click event listener, we will calculate the user’s bmi, and then, using the if else condition statements, we will check to see if the user is underweight, healthy, or overweight. First, we will create some variables, and then, using the document.getelementbyId() method, we will select all of the html elements.

 

Final Output Of BMI Calculator

 

Codepen Preview Of BMI Calculator using HTML , CSS & Javascript

 

Now we have completed our javascript Code section For the BMI calculator. Here is our updated output with javascript Code. I hope you like the BMI Calculator Source Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

Create Image Slider Using HTML, CSS And JavaScript Code

In this post, we learn how to create a BMI Calculator project form using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by –¬†@nikolett_codes

 

Which code editor do you use for this BMI Calculator coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Create BMI Calculator Using HTML,CSS & JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT