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">
<div class="container-fluid" id="app">
  <h1>Disability - Covered Benefit</h1><hr>
  <div class="row">
    <div class="col-md-4">
      <h4>Plan</h4>
      <div class="form-group">
        <label>Benefit Percentage (%)</label>
        <input type="number" class="form-control" v-model="benefit_percentage">
      </div>
      <div class="form-group">
        <label>Minimum Benefit ($)</label>
        <input type="number" class="form-control" v-model="minimum_benefit">
      </div>
      <div class="form-group">
        <label>Maximum Benefit ($)</label>
        <input type="number" class="form-control" v-model="maximum_benefit">
      </div>
      <div class="form-group">
        <label>Rate per $100 ($)</label>
        <input type="number" class="form-control" v-model="rate_per_100">
      </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="monthly_salary">
      </div>
    </div>
    <div class="col-md-4">
      <h4>Calculations</h4>
      <button class="btn-sm btn-success float-left mr-2" v-on:click="calculate">Calculate</button>
      <button class="btn-sm btn-default float-left" v-on:click="reset">Reset</button>
      <div class="clearfix"></div>
      <div class="form-control output mt-3 p-2" v-if="calculated">
        <div>Covered Benefit: $<span>{{ covered_benefit.toFixed(2) }}</span></div>
        <div>Monthly Premium: $<span>{{ monthly_premium.toFixed(2) }}</span> p.m.</div>
      </div>
    </div>
  </div>
</div>

CSS

body { 
  padding-top: 0.5em;
}
.output {
  background: #f7f7f7;
  border: 1px solid #ccc;
  height: 300px;
  font-family: monospace;
}
button {
  outline: none;
}

JavaScript

var disabilityBasic = new Vue({
  el: '#app',
  data: {
  
  	// inputs
    benefit_percentage: 50,
    minimum_benefit: 10,
    maximum_benefit: 2500,
    rate_per_100: 1,
    monthly_salary: 10000,
    
    // output
    covered_benefit: '',
    monthly_premium: '',
    
    // misc
    calculated: false
  },
  methods: {
  	calculate: function() {
    
    	// 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;
    }
  }
})