body mass index calculator

Community feedback

• 

  P

  Habeeb Kareem•690

  @olaide-hok

  Posted 3 months ago

  Great work here!

  Some areas for improvements would be:

  1. Readability: Some variable and function names are not descriptive enough (e.g., mVal, value in setBMIResultDOM). You can use more descriptive names to improve readability. Examples would be renaming mVal to heightInMeters, value in setBMIResultDOM to isEmpty.

  2. Reusability: The code is tightly coupled to the DOM structure, making it less reusable. An approach would be to decouple the logic from the DOM by passing elements as parameters or using dependency injection. For example

  function calculateBMI(unitSystem, height, weight, heightInches = 0, weightLbs = 0) {
    // BMI calculation logic
  }
  

  3. Duplicate Code: Some logic is repeated (e.g., setBMIResultDOM is called in multiple places). You can consolidate repeated logic into reusable functions. For example

  function updateResultUI(bmi, classification) {
    this.setBMIResultDOM(false);
    this.bmiScore.textContent = bmi.toFixed(1);
    this.updateBMITextResult(classification);
  }
  

  4. Imperial Unit Support: The code only calculates BMI for metric units. Imperial unit support is incomplete. You can add functions to calculate BMI for imperial units. Example:

  function calculateImperialBMI(ft, inches, st, lbs) {
    const heightInInches = ft * 12 + inches;
    const heightInMeters = heightInInches * 0.0254;
    const weightInKg = (st * 14 + lbs) * 0.453592;
    return weightInKg / (heightInMeters * heightInMeters);
  }
  

  5. Performance: The keyup event listener recalculates BMI on every keystroke, which can be inefficient. Consider using the debouncing approach to limit the number of calculations.

  Example:

  function debounce(func, delay) {
    let timeout;
    return function () {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, arguments), delay);
    };
  }
  
  inputsContainer.addEventListener("keyup", debounce(() => {
    if (units === "metric") {
      if (canCalculateMetricBMI()) {
        updateResultUI();
      }
    }
  }, 300));
  

  Overall, well done. Happy coding!

  00