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 - Flat %</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>Benefit Rounding Rule</label>
        <select class="form-control" v-model="benefit_rounding_rule">
          <option value="">Select</option>
          <option value="benefit">Benefit</option>
          <option value="salary">Salary</option>
        </select>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <select class="form-control" v-model="benefit_rounding_algo">
              <option value="">Select</option>
              <option value="closest" selected>Closest</option>
              <option value="down">Down</option>
              <option value="up">Up</option>
            </select>
          </div>
          <div class="col-md-6">
            <select class="form-control"...

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,
    benefit_rounding_rule: '',
		benefit_rounding_algo: '',
		benefit_rounding_value: '',
		max_benefit_rounding_algo: '',
		max_benefit_rounding_value: '',
    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
    rounded_salary: 0,
    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;
      
      // round salary if required
      this.rounded_salary = this.monthly_salary;
      if(this.benefit_rounding_rule === 'salary') {
      	this.rounded_salary = round_function(this.monthly_salary, 
        	this.benefit_rounding_algo, 
          this.benefit_rounding_value);
      }
    
    	// determine covered benefit
    	this.covered_benefit = (this.benefit_percentage/100) * this.rounded_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;
      }
      
      this.rounded_benefit = this.covered_benefit;
      if(this.benefit_rounding_rule === 'benefit') {
      	this.rounded_benefit = round_function(this.covered_benefit, 
        	this.benefit_rounding_algo, 
          this.benefit_rounding_value);
      }
      
      // calculate monthly premium
     ...