plastikaweb
7/18/2017 - 4:04 PM

BMI RXjs calculator using bacon.js https://jsbin.com/hehaju

BMI RXjs calculator using bacon.js https://jsbin.com/hehaju

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
  <div>
    <label>Height (cms): <span id="height-value">170</span></label>
    <div>
      <input type="range" id="height-input" min=120 max=240 value=170>
    </div>
  </div>
  
  <div>
    <label>Weight (kgs): <span id="weight-value">170</span></label>
    <div>
      <input type="range" id="weight-input" min=20 max=250 value=70>
    </div>
  </div>
  <p>BMI: <span id="bmi"></span></p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.94/Bacon.min.js"></script>
<script id="jsbin-javascript">
//height$ -----a----b-------c----d------>
//weight$ -------e----f--------g----h--->
        // calcBmi(weight, height)
//bmi$ -------(a,e)(b,e)-(c,g)-(d,g)-(d,h)-->

const height$ = Bacon.fromEvent(document.querySelector('#height-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(170);

const weight$ = Bacon.fromEvent(document.querySelector('#weight-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(70);

const bmi$ = Bacon.combineWith(height$, weight$, (h, w) => {
  const heightInMeters = h/100;
  const bmi = w/(heightInMeters * 2);
  return bmi.toFixed(2);
})     .onValue((value) => {
       document.querySelector('#bmi').innerHTML = value;
     }); 

height$.onValue((value) => {
  document.querySelector('#height-value').innerHTML = value;
});

weight$.onValue((value) => {
  document.querySelector('#weight-value').innerHTML = value;
});
</script>



<script id="jsbin-source-javascript" type="text/javascript">//height$ -----a----b-------c----d------>
//weight$ -------e----f--------g----h--->
        // calcBmi(weight, height)
//bmi$ -------(a,e)(b,e)-(c,g)-(d,g)-(d,h)-->

const height$ = Bacon.fromEvent(document.querySelector('#height-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(170);

const weight$ = Bacon.fromEvent(document.querySelector('#weight-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(70);

const bmi$ = Bacon.combineWith(height$, weight$, (h, w) => {
  const heightInMeters = h/100;
  const bmi = w/(heightInMeters * 2);
  return bmi.toFixed(2);
})     .onValue((value) => {
       document.querySelector('#bmi').innerHTML = value;
     }); 

height$.onValue((value) => {
  document.querySelector('#height-value').innerHTML = value;
});

weight$.onValue((value) => {
  document.querySelector('#weight-value').innerHTML = value;
});</script></body>
</html>
jsbin.hehaju.js
content_copyfile_download
//height$ -----a----b-------c----d------>
//weight$ -------e----f--------g----h--->
        // calcBmi(weight, height)
//bmi$ -------(a,e)(b,e)-(c,g)-(d,g)-(d,h)-->

const height$ = Bacon.fromEvent(document.querySelector('#height-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(170);

const weight$ = Bacon.fromEvent(document.querySelector('#weight-input'), 'input')
     .map((e) => {
       return e.target.value;
     }).startWith(70);

const bmi$ = Bacon.combineWith(height$, weight$, (h, w) => {
  const heightInMeters = h/100;
  const bmi = w/(heightInMeters * 2);
  return bmi.toFixed(2);
})     .onValue((value) => {
       document.querySelector('#bmi').innerHTML = value;
     }); 

height$.onValue((value) => {
  document.querySelector('#height-value').innerHTML = value;
});

weight$.onValue((value) => {
  document.querySelector('#weight-value').innerHTML = value;
});