LemonadeJS - Two-way binding JS library

State variable example with lemonadejs.

by joaovmvini

HTML

<html>
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.layout.css" type="text/css" />
<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id='root'></div>
<script>
var bmi = (function(container){
  var self = {};
 
  self.nameElement = null;
  self.heightElement = null;
  self.weightElement = null; 
  self.resultElement = null;
  
  self.calculate = function() {
    var name = self.nameElement.value;
    var height = self.heightElement.value;
    var weight = self.weightElement.value;
    if(name && Number(height) && Number(weight)) {
      var bmi = (weight / Math.pow(height,2)).toFixed(2);
      var text = `${name}, your BMI is ${bmi} and `;
      if(bmi < 18.5) {
        self.result = text + "you are very underweight.";
      }else if(bmi <= 24.5) {
        self.result = text + "you are at an ideal weight.";
      }else if(bmi <= 29.9) {
        self.result = text + "you are overweight.";
      }else if(bmi <= 39.9) {
        self.result = text + "you are at an obesity level.";
      }else if(bmi >= 39.9) {
        self.result = text + "you have morbid obesity.";
      }
      alert(self.result)
    }else {
      alert("Invalid input values");
    }
    
  }
  
  var template = `
  <div class="column p10 m10" style="color: #051e3e; font-weight: 600; background: #e6e6ea; border-radius: 8px; box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.65);">
    <span class="row center" style="display: block; font-size: 1.8em; border-bottom: 2px solid #051e3e;">Calculator - BMI</span>
    <div class="row p15">
      <div class="form-group">
            <label for="name">Name:</label>
            <input @ref="self.nameElement" type="text" id="name" class="bmi-input"/>
      </div>
      <div class="form-group">
          <label for="height">Height:</label>
          <input  @ref="self.heightElement" type="text" id="height" class="bmi-input"/>
      </div>
      <div class="form-group">
        <label for="weight">Weight:</label>
        <input ...