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.

7 Responses

  1. Erwin 2 juni 2014 / 11:05

    Beste webvrijheid,

    Mag deze BMI-calculator, zoals hierboven prachtig uitgelegd, op een website geïmplementeerd worden? Ik zie geen disclaimer, dus ik vraag het voor de zekerheid even.

    Met vriendelijke groet,

    Erwin

  2. webparking 2 juni 2014 / 11:09

    Ja hoor. Zouden het wel echt superleuk vinden als je een berichtje kunt sturen waar we hem kunnen bewonderen (en hoe hij geworden is mocht je nog e.e.a. tweaken aan de weergave etc).

    • Erwin 2 juni 2014 / 11:12

      Zal ik zeker doen!
      Het zal een vooraanstaande website in NL zijn volgens mij.

      • webparking 2 juni 2014 / 11:13

        Wij vinden het helemaal leuk. Succes ermee. Mochten wij nog ergens mee kunnen helpen (code is alweer beetje gedateerd dus mogelijk werkt hij niet perfect in de nieuwste Jquery) dan horen we het wel.

  3. Theo 25 december 2014 / 14:04

    Ik zou hem ook graag gebruiken! ik zal zodra hij live staat (en als ik het niet vergeet) zal u hier een berichtje hier zetten.

    Ik zal sowieso even je naam op mijn site noemen (linkje naar je site).

  4. Theo 25 december 2014 / 14:52

    Hmmmm helaas werkt het niet met de laatste versie van jquery.

    Ik gebruik jquery-1.11.0.min.js met bootstrap.

    • webparking 28 december 2014 / 19:44

      Beste Theo,

      Dank voor je poging hem te benutten. Hij is inderdaad alweer enige tijd geleden geschreven. Heb nu even niet de tijd om echt te kijken en testen waar het schort maar kan niet veel ingewikkelds zijn. Mocht je het op weten te lossen dan zou het super zijn als je de benodigde wijzigingen kunt documenteren zodat anderen er ook baat bij hebben.

      Met vriendelijke groet,

      Remko

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *