Webparking Weblog ZEND Framework | jquery | internet | php | webdesign

BMI calculator met Jquery

Voor een project wat nog in ontwikkeling is moest ik een BMI calculator maken. Ik had er ooit wel eens één gemaakt maar die werkte via een POST en 'berekende' alles met PHP. Het leek me leuk dit keer Jquery te gebruiken.

De oude BMI calculator

Zoals je ziet op zich prima maar een beetje statisch. Tevens niet echt superduidelijk. Er zit een 1 px wit lijntje wat je huidige BMI aanduidt maar je moet wel goed opletten om die te zien.

De nieuwe BMI calculator

Zoals je ziet wel wat overeenkomsten (zelfde opdrachtgever dus moest zelfs alles een beetje gelijk houden) maar toch net even wat frisser. Een duidelijkere pointer voor je BMI en in plaats van invulvelden en een submitbutton gewoon twee Jquery UI sliders.

De code

Wat heb je in iedere geval nodig?

1. Jquery
2. Jquery UI
3. Een BMI afbeelding voor de achtergrond
4. Eventueel een leuke afbeelding voor de pointer

Voor het gemak kun je het hele gebruikte pakketje voor deze implementatie hier downloaden.

De te includen bestanden in de header

1. reset.css
2. screen.css
3. jquery-ui-1.8.16.custom.css
4. jquery.1.6.1.min.js
5. jquery-ui-1.8.16.custom.min.js
6. bmi.js

De HTML

Dit is de kale HTML voor de slider met tabel etc.

<div id="lengthSlider"></div>
<label for="length">Uw lengte is <input type="text" id="length" /> centimeter</label>

<div id="weightSlider"></div>
<label for="weight">Uw gewicht is <input type="text" id="weight" /> kilogram</label>

<div id="bmiScale">
    Uw Body Mass Index is
    <div id="bmiScalePointer"></div>
</div>

<div id="bmiInformation">
  <h4>Wat is een gezonde BMI?</h4>
  <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tbody>
      <tr>
        <td width="10"><img src="</assets/images/bmi-yellow.gif" alt="ondergewicht" height="10" width="10"></td>
        <td width="130">Tussen 16 - 20</td>
        <td width="240">Uw BMI is iets te laag</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-green.gif" alt="gezond gewicht" height="10" width="10"></td>
        <td>Tussen 20 - 25</td>
        <td>gezond gewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-yellow.gif'" alt="normaal - licht overgewicht" height="10" width="10"></td>
        <td>Tussen 25 – 27</td>
        <td>normaal - licht overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-orange.gif" alt="normaal - overgewicht" height="10" width="10"></td>
        <td>Tussen 27 -29</td>
        <td>normaal - overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red-orange.gif'" alt="overgewicht" height="10" width="10"></td>
        <td>Boven de 30</td>
        <td>overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red.gif" alt="ernstig overgewicht" height="10" width="10"></td>
        <td>Boven de 40</td>
        <td>ernstig overgewicht</td>
      </tr>
    </tbody>
</table>
</div>

De Jquery code

De volgende code berekend de BMI, verplaatst de pointer etc.
Zie ook de opmerkingen ertussen.

// Function to calculate the BMI using lenght in centimeters and weight in kilograms
function calculateBMI(lenght, weight)
{
  // Calculate the BMI and round at 1 decimal
  var result = Math.round(weight / (lenght/100 * lenght/100)*10)/10;

  // Determine the left position of the bmiScalePointer (and subtract 50% of it's width)
  var leftPos = (result*10)-22;

  // If the leftpos is > 450 it would run out of the scale so stop it here
  if(leftPos > 450) {
  leftPos = 450;
  result = Math.round(result);
}

// Update the bmiScalePointer value
$('#bmiScalePointer').html("BMI<br/><br/>" + result);

// Move the bmiScalePointer to it's new position
$('#bmiScalePointer').css('left', leftPos);
}

$(document).ready(function() {
  // Just plain Jquery UI slider functionalitiy
  $("#lengthSlider").slider({
    value: 175,
    min: 130,
    max: 220,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI(ui.value, $('#weight').val());
      $("#length").val(ui.value);
    }
  });

  $("#length").val($("#lengthSlider").slider("value"));

  $("#weightSlider").slider({
    value: 75,
    min: 24,
    max: 250,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI($('#length').val(), ui.value);
      $("#weight").val(ui.value);
    }
  });
  $("#weight").val($("#weightSlider").slider("value"));

  // Do a initial calculation
  calculateBMI($('#length').val(), $('#weight').val());
});

Nogmaals voor het gemakt: Het hele gebruikte pakketje voor deze implementatie kun je hier downloaden.