ABCP test

This version is used for the SGTDesk website

by ebie1224

HTML

<div class="sectionthree">
    <label for="absThree">Ab Circumference (Inches)</label>
    <br>
    <input id="absThree" type="number" required>
    <br>
    <label for="weightTwo">Weight (LBS)</label>
    <br>
    <input id="weightTwo" type="number" required>
    <br>
		<label for="age">Age (yrs)</label>
		 <br>
    <input id="age" type="number" maxlenght="3" size="3" required>
    <br>
    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
    <br>
		<br>
    <button type="button" onclick="bodyFatTwo()">
      SUBMIT
    </button>
		 <button type="button" onclick="location.reload()">
      RESET
    </button>
    <br>
    <div>
      <p id="result3"></p>
    </div>
  </div>

CSS

body{
	background:#9E9FA5;
}

div{
	text-align:center;
	background: #C4C1A4;
}

JavaScript

function bodyFatTwo() {
  let absOne = document.getElementById("absThree").value;
  let sizeOne = document.getElementById("weightTwo").value;
  let yrs = document.getElementById("age").value;
  let gender = document.getElementById("gender").value;
  /* -26.97 - (0.12 * size) + (1.99 * abs) */

  if (gender === "male") {
    cal2 = -26.97 - (0.12 * sizeOne) + (1.99 * absOne);
    document.getElementById("result3").innerHTML = cal2.toFixed(2);
    if ((cal2 < 20) && (yrs <= 21))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else if ((cal2 < 22) && (yrs >= 22 && yrs <= 27))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else if ((cal2 < 24) && (yrs >= 28 && yrs <= 39))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else if ((cal2 < 26) && (yrs >= 40))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:red">  FAILED</span>';
    document.getElementById("result3").style.fontSize = "x-large";
    document.getElementById("result3").style.textAlignt = "center";


  } else if (gender === "female") {
    cal2 = -9.15 - (0.015 * sizeOne) + (1.27 * absOne);
    document.getElementById("result3").innerHTML = cal2.toFixed(2);
    if ((cal2 < 30) && (yrs <= 21))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else if ((cal2 < 32) && (yrs >= 22 && yrs <= 27))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green">  PASSED</span>';
    else if ((cal2 < 34) && (yrs >= 28 && yrs <= 39))
      document.getElementById("result3").innerHTML = cal2.toFixed(2) + '<span style="color:green"> ...