JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <div id="app" class="row mt-5">	
    <div class="col-sm-6">
      <h4 class="mb-2">What is the maximum <br> bond I can get ?</h4>
    <div class="affordability-input">
      <input type="text" v-model="gross_income" placeholder="Enter gross monthly income (R)">
      <input type="text" v-model="loan_term" placeholder="Payment term (years)">
      <input type="text" v-model="interest_rate" placeholder="Interest Rate (%)">
      <button @click="calculate" class="bg-blue">Calculate</button>
    </div>
    </div>
    <div class="col-sm-6">	
      <div class="flex align-center">
        <div class="phone mr-2">
          <img src="/images/phone.jpg">
        </div>
        <div class="results">
          <h4 class="mb-2">Your results</h4>
          <div v-if="take">
            <p>Gross monthly income <span v-if="gross_income" v-text="'= ' + gross_income"></span></p>
            <p>The transfer cost <span v-if="loan_term" v-text="'= ' + loan_term"></span></p>
            <p class="mb-3">The bond cost <span v-if="interest_rate" v-text="'= ' + interest_rate"></span></p>
          </div>

          <p v-if="show">Monthly Repayment R {{monthly_repayment}}</p>
          <p v-if="show">Monthly Interest Rate R {{month_interest_rate}}</p>

          <p v-if="show">Total Repayment R{{total_repayment}}</p>
          <p v-if="show">You can afford a loan of R {{affordability}}</p>
          <a class="bg-transparent mt-4 border" href="/login">Get Pre-Approval</a>
        </div>

      </div>
    </div>
  </div>

JavaScript

new Vue({
      el: '#app',
          data(){
            return{
              gross_income: '',
              loan_term: '',
              interest_rate: '',
              valor: '',
              show: false,
              take: true,
              monthly_repayment: '',
              num_period: '',
              month_interest_rate: '',
              total_repayment: '',
              affordability: ''

            }
          },
          mounted(){

          },
          methods: {
            calculate(){
                this.num_period = parseFloat(this.loan_term) * 12;

                this.monthly_repayment = parseFloat(this.gross_income) * 0.3;

                this.month_interest_rate = parseFloat(this.interest_rate) / 12;

                this.total_repayment = parseFloat(this.num_period) * this.monthly_repayment;

                this.affordability = this.monthly_repayment * (1 - Math.pow(( 1 + this.month_interest_rate), - this.num_period)) / this.month_interest_rate;

                var income = parseFloat(this.gross_income) + 2;
                this.show = true; 				
                this.take = false; 				

            }
          }

    });