JSFiddle - React, Tailwind, and code Playground

by anpel13

HTML

<!-- Creatinine clearance calculator. -->
<form id="form-id" method="post">
  <div id="creat-calc">
    <div class="card">
      <div class="card-header py-3">
        <h5 class="m-0 font-weight-bold text-primary"><strong>Creatinine clearance
            calculator</strong></h5>
      </div>
      <div class="card-body">
        <p>Sex of patient:</p>
        <div>
          <label class="radio-inline">
            <input type="radio" name="sex" value="m" checked> Male
          </label>
          <label class="radio-inline">
            <input type="radio" name="sex" value="f"> Female
          </label>
          <p>Age of patient (years):</p>
          <input type="number" min="1" max="120" name="patients-age" />
          <br /><br />
          <p>Weight of patient (kg):</p>
          <input type="number" min="1" max="120" name="patients-weight" />
          <br /><br />
          <p>Serum creatinine (micromol/L):</p>
          <input type="number" min="1" max="120" name="patients-serum" />
          <br />
        </div>
        <br />
        <hr />
        <div id="crtresult">
          <h5 id="outs"></h5>
          <p>Original Cockcroft-Gault Equation: <a href="https://www.mdcalc.com/creatinine-clearance-cockcroft-gault-equation#creator-insights" style="color:white;"><u> mdcalc website</u></a></p>
        </div>
        <button type="button" class="btn btn-primary" onclick="calcCreatine();">Calculate
        </button>
        <button type="button" class="btn btn-danger" onclick="popup.hideCeatCalcFormPopup();">
          Close
        </button>
        <button type="reset" class="btn btn-primary" onclick="resetButton();">Reset</button>
      </div>
    </div>
  </div>
</form>

JavaScript

function calcCreatine() {
  var sexInput = document.querySelector('input[name="sex"]:checked').value;
  var ageInput = document.getElementsByName("patients-age")[0].value;
  var weightInput = document.getElementsByName("patients-weight")[0].value;
  var serumInput = document.getElementsByName("patients-serum")[0].value;
  var result;

  if (sexInput === 'm') {
    result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput);
  } else {
    result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput);
  }

  result = result.toString().bold().fontsize(6);
  resultText = " mL/min".small() + " - Creatinine clearance.";
  res = result + resultText.bold();

  return document.getElementById("outs").innerHTML = res;
}
}