Floss Financial

Helping you live your best financial life. 

R500 000

20 Years

CSS .home-loan{ width:450px; padding:30px; background:white; border-radius:15px; box-shadow:0px 5px 20px rgba(0,0,0,.2); margin:40px auto; text-align:center; } .home-loan input{ width:100%; margin-bottom:20px; } .home-loan button{ background:#082b5b; color:white; padding:15px 35px; border:none; border-radius:8px; cursor:pointer; font-size:18px; } .home-loan button:hover{ background:#C89A2B; } JavaScript const house=document.getElementById("housePrice"); const years=document.getElementById("loanTerm"); const houseValue=document.getElementById("houseValue"); const term=document.getElementById("termValue"); const monthly=document.getElementById("monthlyPayment"); function calculateLoan(){ let amount=parseFloat(house.value); let termYears=parseFloat(years.value); let rate=0.11; let monthlyRate=rate/12; let months=termYears*12; let payment=(amount*monthlyRate)/(1-Math.pow(1+monthlyRate,-months)); houseValue.innerHTML="R"+amount.toLocaleString(); term.innerHTML=termYears+" Years"; monthly.innerHTML="Estimated Monthly Repayment
R"+Math.round(payment).toLocaleString()+""; } house.oninput=calculateLoan; years.oninput=calculateLoan; calculateLoan();

Personal Loan Calculator

R10 000

Interest (30%)

R3 000

Total Repayment

R13 000

CSS .loan-calculator{ width:420px; padding:30px; background:white; border-radius:15px; box-shadow:0px 5px 20px rgba(0,0,0,.2); margin:auto; text-align:center; } .loan-calculator h2{ color:#082b5b; } .loan-calculator input{ width:100%; } .loan-calculator button{ margin-top:20px; background:#C89A2B; color:white; padding:15px 35px; border:none; border-radius:8px; cursor:pointer; font-size:18px; } .loan-calculator button:hover{ background:#082b5b; } JavaScript const loanSlider=document.getElementById("loanAmount"); const amount=document.getElementById("amountText"); const interest=document.getElementById("interestText"); const total=document.getElementById("totalText"); loanSlider.oninput=function(){ let loan=parseFloat(this.value); let interestAmount=loan*0.30; let totalAmount=loan+interestAmount; amount.innerHTML="R"+loan.toLocaleString(); interest.innerHTML="R"+interestAmount.toLocaleString(); total.innerHTML="R"+totalAmount.toLocaleString(); } loanSlider.oninput();
Search