RiotJS Loan Calculator

index.html

<hello-world />

<script type="riot/tag">
  <hello-world>
    <div class="row">
      <div class="medium-7 columns">
        <form oninput={ loanCalc } onchange={ loanCalc } >

          <!-- ///// range slider ///// -->
            <h3>I want to borrow</h3>
            <input name="loanAmount" type="range" min=5000 max=30000 value={ loanAmount } oninput={ editAmount }/><span class="amount">AU$ { loanAmount }</span>
            <hr>
            <!-- ///// Loan Duration ///// -->
            <h3>For a duration of</h3>
            <select onchange={ editDuration } name="duration" id="">
              <option each={ duration, i in opts.duration } selected={ i == 1 } value={ loanDuration }> { duration } months </option>
            </select>
            <!--<span each={ duration, i in opts.duration }>
              <input type="radio" name="duration" value={ duration } checked={ i == 1 }  onchange={ parent.editDuration }><label>{ duration } months</label>
            </span>-->
              <hr>
            <!-- ///// Credit Score ///// -->
            <h3>My credit score is</h3>
            <span each={ credit, value in opts.credit }>
              <input type="radio" name="credit" value={ value[0] } checked={ value[3] } onchange={ parent.editCredit }>
              <label>{ credit }</label>
            </span>
            <hr>

            <!-- ///// Repayment Frequency ///// -->
            <h3>Desired repayments frequency</h3>
            <span each={ frequency, freqVal in opts.repayFreq }>
              <input type="radio" name="frequency" value={ freqVal } checked={ frequency == 'Monthly' } onchange={ parent.editFrequency }>
              <label>{ frequency }</label>
            </span>
        </form>
      </div>
      <div class="medium-5 columns">
   
        <!-- ///// Loan Calculation ///// -->
        <h3 class="loan-calc" show={ loanAmount && loanDuration && loanCredit }><strong>{ labelFrequency }</strong> repayments:</h3>
        <div class="value">AU$ <strong>{ this.repaymentRate }</strong></div>    
        <p class="data-info">Min Interest Rate: <strong>{ loanCredit }%</strong></p>
      </div>
    </div>
    
    var repaymentRate
    
    // LOAN AMOUNT
    this.loanAmount = localStorage.getItem('loanAmount') === null ? opts.defaults.amount : localStorage.getItem('loanAmount')
    editAmount(e) { 
      this.loanAmount = parseInt(e.target.value) 
      localStorage.setItem('loanAmount', this.loanAmount)
    }
    
    // LOAN DURATION
    this.loanDuration = localStorage.getItem('loanDuration') === null ? opts.defaults.duration : localStorage.getItem('loanDuration')
    editDuration(e) { 
      this.loanDuration = parseInt(e.target.value)
      localStorage.setItem('loanDuration', this.loanDuration)
    }
    
    // LOAN CREDIT
    this.loanCredit = localStorage.getItem('loanCredit') === null ? opts.defaults.credit : localStorage.getItem('loanCredit')
    editCredit(e) { 
      this.loanCredit = e.item.value[0]
      localStorage.setItem('loanCredit', this.loanCredit)
    }
    
    // LOAN FREQUENCY
    this.loanFrequency = localStorage.getItem('loanFrequency') === null ? opts.defaults.frequency : localStorage.getItem('loanFrequency')
    editFrequency(e) { 
      this.loanFrequency = parseInt(e.item.freqVal)
      this.labelFrequency = e.item.frequency
      localStorage.setItem('loanFrequency', this.loanFrequency)
    }
    
    // FREQUENCY LABEL
    this.labelFrequency = localStorage.getItem('loanFrequency') === null ? opts.defaults.labelFrequency : this.labelFrequency
        
    // REPAYMENT CALCULATION
    loanCalc() {
      var interestRate = ( this.loanCredit / 1200 )
      var duration = this.loanDuration
      var amount = this.loanAmount
      var frequency = this.loanFrequency
      var fv = 0

      var pmt = ( 12 / frequency ) * ( interestRate * ( amount * Math.pow ( (interestRate+1), duration ) + fv ) ) / ( ( interestRate + 1 ) * ( Math.pow ( (interestRate+1), duration) -1 ) )

      this.repaymentRate = Math.ceil(pmt)
    
      localStorage.setItem('repaymentRate', this.repaymentRate)
    }
    
    // REPAYMENT RATE
    this.repaymentRate = localStorage.getItem('repaymentRate') === null ? opts.defaults.repayment : this.repaymentRate
    
    // CALCULATING ON MOUNT
    this.on('mount update unmount', function(eventName) {
      this.loanCalc()
    })
         
  </hello-world>
</script>

<!-- including riot.js and compiler -->
<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>

<!-- mounting riot tags -->
<script>
  riot.mount('hello-world', {
    defaults: { 
      amount: 17500, 
      duration: 24, 
      credit: 11.75, 
      frequency: 12,
      labelFrequency: 'Monthly',
      repayment: 814 
    },
    	duration: [12, 24, 36],
    credit: {
      'Below Average': 	[14.10, 14.10, 0.00],
      'Average': 			[12.75, 12.75, 0.00],
      'Good': 			[11.75,	11.75, 0.00, 'checked'],
      'Very Good': 		[9.95, 9.95, 0.00],
      'Excellent': 		[9.95, 9.95, 0.00]
    },
    repayFreq: { 'Monthly': 12, 'Bi-Weekly': 26, 'Weekly': 52 }
  })
</script>

RiotJS Loan Calculator.markdown

RiotJS Loan Calculator

Loan repayment calculator using RiotJS by Muut

A Pen by Simon Vrachliotis on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  padding: 3rem 0;
  font-family: 'Lato', sans-serif;
}

.row {
  border: solid 4px #f2f2f2;
  padding: 1rem;
}

.loan-calc {
  font-weight: 300;
  margin-bottom: 0;
}
  
.value {
  background: #00bf5c;
  padding: 1.5rem 2rem;
  font-size: 1.5rem;
  margin: 1rem 0 1.5rem;
  color: white;
  display: inline-block;
}

.data-info {
  background: #f2f2f2;
  padding: .75rem 1rem;
}

span.amount {
  padding: .5rem 1rem;
  vertical-align: bottom;
  font-size: 1.1rem; 
}

strong {
  font-weight: 700;
}

input[type="radio"]:checked+label {
  color: darken(#00bf5c, 5);
}

styles

<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />