BMI 계산기 스크립트

style

  .calculateButtonBeomSang {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }

  .tableBeomSang {
    border-collapse: collapse;
    margin-top: 20px;
  }

  .thTdBeomSang {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .thBeomSang {
    background-color: #f2f2f2;
  }

  .tdRightBeomSang {
    text-align: right;
  }

  .fieldsetBeomSang {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
  }

  .legendBeomSang {
    font-weight: bold;
    padding: 0 10px;
  }

script

    function calculateBMIBeomSang() {
      var height = parseFloat(document.getElementById("heightBeomSang").value) / 100;
      var weight = parseFloat(document.getElementById("weightBeomSang").value);

      if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
        document.getElementById("resultBeomSang").innerHTML = "신장과 체중을 올바르게 입력해 주세요.";
        return;
      }

      var bmi = (weight / (height * height)).toFixed(2);
      var category;

      if (isNaN(bmi)) {
        category = "신장 또는 체중을 입력해 주세요.";
      } else if (bmi < 18.5) {
        category = "저체중";
      } else if (bmi <= 22.9) {
        category = "정상";
      } else if (bmi <= 24.9) {
        category = "비만전단계";
      } else if (bmi <= 29.9) {
        category = "1단계 비만";
      } else if (bmi <= 34.9) {
        category = "2단계 비만";
      } else {
        category = "3단계 비만";
      }

      var weightRanges = `
        <table class="tableBeomSang">
          <tr><th class="thBeomSang thTdBeomSang">범주</th><th class="thBeomSang thTdBeomSang">체중 범위</th></tr>
          <tr><td class="thTdBeomSang">저체중</td><td class="tdRightBeomSang thTdBeomSang">${(18.5 * height * height).toFixed(2)}kg 이하</td></tr>
          <tr><td class="thTdBeomSang">정상</td><td class="tdRightBeomSang thTdBeomSang">${(18.6 * height * height).toFixed(2)}kg ~ ${(22.9 * height * height).toFixed(2)}kg</td></tr>
          <tr><td class="thTdBeomSang">비만전단계</td><td class="tdRightBeomSang thTdBeomSang">${(23.0 * height * height).toFixed(2)}kg ~ ${(24.9 * height * height).toFixed(2)}kg</td></tr>
          <tr><td class="thTdBeomSang">1단계 비만</td><td class="tdRightBeomSang thTdBeomSang">${(25.0 * height * height).toFixed(2)}kg ~ ${(29.9 * height * height).toFixed(2)}kg</td></tr>
          <tr><td class="thTdBeomSang">2단계 비만</td><td class="tdRightBeomSang thTdBeomSang">${(30.0 * height * height).toFixed(2)}kg ~ ${(34.9 * height * height).toFixed(2)}kg</td></tr>
          <tr><td class="thTdBeomSang">3단계 비만</td><td class="tdRightBeomSang thTdBeomSang">${(35.0 * height * height).toFixed(2)}kg 이상</td></tr>
        </table>
      `;

      var result = document.getElementById("resultBeomSang");
      result.innerHTML = `
        <table class="tableBeomSang">
          <tr>
            <th class="thBeomSang thTdBeomSang">BMI</th>
            <th class="thBeomSang thTdBeomSang">결과</th>
          </tr>
          <tr>
            <td class="tdRightBeomSang thTdBeomSang">${bmi}</td>
            <td class="tdRightBeomSang thTdBeomSang">${category}</td>
          </tr>
        </table>
        ${weightRanges}
      `;
    }

body

<form>
  <fieldset class="fieldsetBeomSang">
    <legend class="legendBeomSang">신장 및 체중 입력</legend>

    <label>신장 (cm):</label>
    <input id="heightBeomSang" type="number" placeholder="신장을 입력하세요"/><br /><br />

    <label>체중 (kg):</label>
    <input id="weightBeomSang" type="number" placeholder="체중을 입력하세요"/><br /><br />

    <button class="calculateButtonBeomSang" onclick="calculateBMIBeomSang()" type="button">BMI 계산하기</button>
  </fieldset>
</form>
<div id="resultBeomSang"></div>