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 - increments -->
<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>Max Ben %</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" v-model.number="increment_size">
          <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" v-model.number="desired_benefit">
          <option v-for="option in...

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 coveredBenefitIncrements = new Vue({
  el: '#appCB',
  data: {
  
  	// inputs
    benefit_percentage: 50,
    minimum_benefit: 10,
    maximum_benefit: 2500,
    rate_per_100: 1,
    monthly_salary: 10000,
    increment_size: 10,
    desired_benefit: 1000,
    
    // saved inputs
    saved_benefit_percentage: 50,
    saved_minimum_benefit: 10,
    saved_maximum_benefit: 2500,
    saved_rate_per_100: 1,
    saved_monthly_salary: 10000,
    saved_increment_size: 10,
    saved_desired_benefit: 1000,
    
    // output
    benefit_increments: [],
    covered_benefit: '',
    monthly_premium: '',
    
    // misc
    calculated: false
  },
  watch: {
  	benefit_percentage: function() {
    	this.calculateIncrements();
    },
    minimum_benefit: function() {
    	this.calculateIncrements();
    },
    maximum_benefit: function() {
    	this.calculateIncrements();
    },
    increment_size: function() {
    	this.calculateIncrements();
    },
    monthly_salary: function() {
    	this.calculateIncrements();
    },
  },
  methods: {
  	calculateIncrements: function() {
    	this.benefit_increments = [];
      
      var upper_end = Math.min(
      	(this.benefit_percentage/100) * this.monthly_salary,
        this.maximum_benefit
      );
      
      for(var i=this.minimum_benefit; i<=upper_end; i+=this.increment_size) {
      	this.benefit_increments.push(i);
      }
    },
  	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;
      this.saved_increment_size = this.increment_size;
      this.saved_desired_benefit = this.desired_benefit;
    
    	// determine covered benefit
    	this.covered_benefit = this.desired_benefit;
      if(this.covered_benefit < this.minimum_benefit) {
     ...