Skip to content

Instantly share code, notes, and snippets.

@simonswiss
Created June 16, 2015 15:52
Show Gist options
  • Save simonswiss/c390da44c8d8cfbe5d7b to your computer and use it in GitHub Desktop.
Save simonswiss/c390da44c8d8cfbe5d7b to your computer and use it in GitHub Desktop.
RiotJS Loan Calculator
<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/riot@2.0.14(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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
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);
}
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment