Create BMI Calculator Using Html Css Javascript Code

Create BMI Calculator Using Html Css Javascript Code

 

 

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.

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

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>

Here Is All The Html Code For The Bmi Calculator Project. Now, You Can See Output Without Css And Javascript Code. Then We Write Css & Javascript For The Bmi Calculator Source Code.

Html Code Output Bmi Calculator

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);
}
Now we have completed our css code section for bmi calculator,  here is our updated output css.
Html Css Bmi Calculator Output 

 

 

 

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);

Final Output Of Bmi Calculator

 

 

Now we have completed our javascript Code section For the BMI calculator. Here is our updated output with javascript Code. 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

Share on:

0 thoughts on “Create BMI Calculator Using Html Css Javascript Code”

Leave a Comment