Ticker

6/recent/ticker-posts

BMI Calculator DEMO + SCRIPT

Ai February 17, 2023

Body Mass Index Calculator

Age

Height (cm)

Weight (kg)

 



<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>
</body>
</html>
Ai

Posted by Ai

Post a Comment

0 Comments

Please do not enter any spam link in the comment box.