JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css">
<!-- covered benefit - flat % -->
<div class="container-fluid" id="appCB">
  <h2>Disability - Covered Benefit - Increments</h2><hr>
  <div class="row">
    <div class="col-md-4">
      <h4>Plan</h4>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Ben Perc (%)</label>
            <input type="number" class="form-control" v-model.number="benefit_percentage">
          </div>
          <div class="col-md-6">
            <label>Rate/$100 ($)</label>
            <input type="number" class="form-control" v-model.number="rate_per_100">
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Min Ben ($)</label>
            <input type="number" class="form-control" v-model.number="minimum_benefit">  
          </div>
          <div class="col-md-6">
            <label>Max Ben ($)</label>
            <input type="number" class="form-control" v-model.number="maximum_benefit">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Increment Size</label>
        <select class="form-control">
          <option value="">Select</option>
          <option value="$10">$10</option>
          <option value="$20">$20</option>
          <option value="$50">$50</option>
          <option value="$100">$100</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <h4>Employee</h4>
      <div class="form-group">
        <label>Monthly Salary ($)</label>
        <input type="number" class="form-control" v-model.number="monthly_salary">
      </div>
      <div class="form-group">
        <label>Desired Benefit ($)</label>
        <select class="form-control"></select>
      </div>
    </div>
    <div class="col-md-4">
      <h4>Calculations</h4>
     ...

CSS

body { 
  padding-top: 0.5em;
}
.output {
  background: #f7f7f7;
  border: 1px solid #ccc;
  font-family: monospace;
}
button.btn {
  outline: none;
}
/* .form-group label {
  font-size: 90%;
  margin: 0;
  margin-bottom: 2px;
}
.form-group {
  margin-bottom: 5px;
}
.form-group .form-control {
  padding: 3px 7px;
  font-size: 90%;
}
 */

JavaScript

var coveredBenefitFlat = new Vue({
  el: '#appCB',
  data: {
  
  	// inputs
    benefit_percentage: 50,
    minimum_benefit: 10,
    maximum_benefit: 2500,
    rate_per_100: 1,
    monthly_salary: 10000,
    
    // saved inputs
    saved_benefit_percentage: 50,
    saved_minimum_benefit: 10,
    saved_maximum_benefit: 2500,
    saved_rate_per_100: 1,
    saved_monthly_salary: 10000,
    
    // output
    covered_benefit: '',
    monthly_premium: '',
    
    // misc
    calculated: false
  },
  methods: {
  	calculate: function() {
    
    	// cache inputs
      this.saved_benefit_percentage = this.benefit_percentage;
      this.saved_minimum_benefit = this.minimum_benefit;
      this.saved_maximum_benefit = this.maximum_benefit;
      this.saved_rate_per_100 = this.rate_per_100;
      this.saved_monthly_salary = this.monthly_salary;
    
    	// determine covered benefit
    	this.covered_benefit = (this.benefit_percentage/100) * this.monthly_salary;
      if(this.covered_benefit < this.minimum_benefit) {
      	this.covered_benefit = this.minimum_benefit;
      }
      else if(this.covered_benefit > this.maximum_benefit) {
      	this.covered_benefit = this.maximum_benefit;
      }
      
      // calculate monthly premium
      this.monthly_premium = (this.covered_benefit / 100) * this.rate_per_100;
      
      // enable results display
      this.calculated = true;
      
    },
    reset: function() {
    	this.calculated = false;
    }
  }
});


var coveredPayrollFlat = new Vue({
  el: '#appCP',
  data: {
  
  	// inputs
    benefit_percentage: 50,
    minimum_benefit: 10,
    maximum_benefit: 2500,
    rate_per_100: 0.5,
    monthly_salary: 10000,
    
    // output
    covered_benefit: '',
    max_covered_salary: '',
    covered_payroll: '',
    monthly_premium: '',
    
    // misc
    calculated: false
  },
  methods: {
  	calculate: function() {
    
      // max covered salary
      this.max_covered_salary = this.maximum_benefit /...