BMI calculator in HTML, CSS and JS

Community feedback

• 

  P

  Anton Vasilache•580

  @AntonvasilachePosted 6 months ago

  Nice work with building the page. It looks pretty much pixel perfect!

  As a suggestion for improvement, you might want to take a look at the JS code though. The BMI calculation defaults to 23.4, regardless of the values you input.

  From what I could tell, the updateSummaryMetric function is not called inside the metric weight input:

  <div class="metric__weight">
  <div class="metric__name">Weight</div>
  <div class="metric__input--wrapper  active--desc">
  <div class="input__quantity">
  <input type="number"
  name="weight__input"
  id="weight__input"
  value="0"
  onchange="updateSummaryImperial()"> //this should be updateSummaryMetric()
  </div>
  <label class="input__unit" for="weight__input">kg</label>
  </div>
  

  As for the updateSummaryMetric function, the if condtion was based off input for imperial units, so it was not executing. The BMI formula needed an update as well. I've managed to get the correct result using this:

   function updateSummaryMetric() {
          let result;
          const height__metric = height__input.value / 100;
          const weight__metric = Number(weight__input.value);
  
          if (height__metric > 0 && weight__input.value > 0) {
            summary__metric.innerText = (
              weight__metric / Math.pow(height__metric, 2)
            ).toFixed(1);
          }
          weclomeDashboard.classList.remove("active--desc");
          activeDashboard.classList.add("active--desc");
        }
  

  I hope you find this useful, maybe it's worth taking a look at the imperial calculation as well.

  Cheers!

  0