Javascript/jQuery – Display inches in feet and inches

I’m making a BMI calculator (see JSFiddle – http://jsfiddle.net/b5ww2/) and I want the height in inches to display in feet and inches. I also want the weight in pounds to be displayed in stones and pounds.

This is the code I’m using to convert the slider value to cm and inches:

slide: function( event, ui ) {
  $( "#heightslidecm" ).html( ui.value + 'cm' );
  $( "#heightslidein" ).html( (ui.value*0.393700787).toFixed(0) + 'in' );
}

My js knowledge isn’t great – especially when it comes to the math aspect.

Any ideas?

Thanks in advance

Answer

You simply need to include the logic for the conversion. Here is an example for feet and inches:

slide: function( event, ui ) {
    $( "#heightslidecm" ).html( ui.value + 'cm' );

    var inches = (ui.value*0.393700787).toFixed(0);
    var feet = Math.floor(inches / 12);
    inches %= 12;

    $( "#heightslidein" ).html( feet + "ft " + inches + 'in');
}

You just need to repeat this same logic for the pounds/stone using the appropriate conversion values.