const form = document.forms["bmi-form"];
const table = document.getElementById("bmi-table");

function addData() {
  const newRow = document.createElement("tr");

  const height = form["height"].value;
  const weight = form["weight"].value;
  const bmi = calculateBmi(height, weight);

  const heightCell = document.createElement("td");
  heightCell.innerText = `${height}cm`;

  const weightCell = document.createElement("td");
  weightCell.innerText = `${weight}kg`;

  const bmiCell = document.createElement("td");
  bmiCell.innerText = bmi;

  let bmiStatus;
  let color;

  if (bmi <= 18.5) {
    bmiStatus = "Underweight";
    color = "red";
  } else if (bmi > 18.5 && bmi <= 25) {
    bmiStatus = "Normal";
    color = "green";
  } else if (bmi > 25 && bmi <= 30) {
    bmiStatus = "Overweight";
    color = "yellow";
  } else if (bmi > 30) {
    bmiStatus = "Obese";
    color = "red";
  } else {
    bmiStatus = "Unkown";
    color = "blue";
  }

  const bmiStatusCell = document.createElement("td");
  bmiStatusCell.innerText = bmiStatus;

  newRow.style.backgroundColor = color;

  newRow.appendChild(heightCell);
  newRow.appendChild(weightCell);
  newRow.appendChild(bmiCell);
  newRow.appendChild(bmiStatusCell);

  table.appendChild(newRow);

  form.reset();
  return false;
}

form.onsubmit = addData;

function calculateBmi(height, weight) {
  height = height / 100;

  const bmi = weight / Math.pow(height, 2);

  return bmi;
}