* { font-family: Quicksand; font-size: 16px; color: #333; } body { margin: 0; height: 100vh; padding: 0; border: 0; background: linear-gradient(to bottom right, #FFFFFF, #FFFFFF); } .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); }

Body Mass Index Calculator

Age

Height (cm)

Weight (kg)

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