Home ›Blogger Script ›Body Mass Index (BMI) Script for Blogger Apple Point 2021
MASIGNASUKAv102
6510051498749449419

Body Mass Index (BMI) Script for Blogger Apple Point 2021

Body Mass Index (BMI) Script for Blogger Apple Point 2021
Add Comments
Thursday, March 11, 2021

Body Mass Index (BMI) Script for Blogger Apple Point 2021

Body mass index (BMI) is a measurement of body fat based on height and weight that applies to adult men and women. Use the interactive calculator below to determine your BMI.

<html>
 <head>
  <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
  <style>
  * {
  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: .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);
}
 </style>
</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>
<script>
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);
</script>
<h2 style="text-align:center;"><a href="https://applepoint021.blogspot.com/">Develop By: Apple Point</a></h2> 

</body>
</html>
KeyPoint.........
Responsive Design (Test)
Google Testing tool Validator
SEO Optimized
Ads Ready
And Much More...
Apple Point

comment 0 Comments

more_vert