RiotJS Bean 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=17500 
            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={ duration }
            > 
              { 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>
    
    this.loanAmount = opts.defaults.amount
    this.loanDuration = opts.defaults.duration
    this.loanCredit = opts.defaults.credit
    this.loanFrequency = opts.defaults.frequency
    this.labelFrequency = opts.defaults.labelFrequency
    this.repaymentRate = opts.defaults.repayment
            
    editAmount(e) { this.loanAmount = parseInt(e.target.value) }
    editDuration(e) { 
      this.loanDuration = parseInt(e.target.value)
      console.log(this.loanDuration)
    }
    editCredit(e) { this.loanCredit = e.item.value[0] }
    editFrequency(e) { 
      this.loanFrequency = parseInt(e.item.freqVal)
      this.labelFrequency = e.item.frequency
    }
    
    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)
    }
     
  </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-bean-calculator.markdown

RiotJS Bean Calculator

Bean counting 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.scss

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="https://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />