<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.apr-container {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.apr-container h1 {
text-align: center;
font-weight: bold;
color: #0056b3;
}
.apr-container .h1 {
text-align: center;
color: #0056b3;
}
.apr-container label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
.apr-container input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.apr-container button {
width: 100%;
padding: 10px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.apr-container button:hover {
background-color: #003d80;
}
.apr-container .result {
margin-top: 20px;
font-size: 1.1em;
color: #333;
}
.apr-container .result h2 {
text-align: center;
color: #0056b3;
}
</style>
<section class="page-title" style="background: url(public/images/pg-title-bg.jpg) center center/cover no-repeat local;">
<div class="container">
<div class="row">
<div class="col col-xs-12">
<h2>APR Calculator</h2>
<ol class="breadcrumb">
<li>
<a href="index">Home</a>
</li>
<li>APR Calculator</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<div class="apr-container container">
<div class="row">
<div class="col-md-4">
<h1>APR Calculator</h1>
<label for="text_box_name_emi">Principal Loan Amount (₹):</label>
<input type="number" id="text_box_name_emi" placeholder="Enter loan amount" value="100000">
<label for="text_box_name1_emi">Interest Rate (% p.a.):</label>
<input type="number" id="text_box_name1_emi" placeholder="Enter interest rate" value="10">
<label for="text_box_name2_emi">Loan Term (Months):</label>
<input type="number" id="text_box_name2_emi" placeholder="Enter loan term in months" value="36">
<label for="text_box_fee_emi">Processing Fee (₹):</label>
<input type="number" id="text_box_fee_emi" placeholder="Enter Processing Fee" value="2000">
<button onclick="AprCalculation1()">Calculate APR</button>
<br />
</div>
<div class="col-md-4">
<div class="result" id="result">
<span class="h1">Result:</span>
<p id="aprInterest">APR Interest: <span>0.00</span> % </p>
<p id="emiamount">Estimated Monthly Payment: ₹ <span>0.00</span>
</p>
<p id="totalPayments">Number of Payments: <span>0</span>
</p>
<p id="totalInterestPaid">Total Interest Paid: ₹ <span>0.00</span>
</p>
<p id="totalCharges">Processing Fee : ₹ <span>0.00</span>
</p>
<p id="payoffDate">Payoff Date: <span>-</span>
</p>
<p id="totalAmountPaid">Total Payments: ₹ <span>0.00</span>
</p>
</div>
</div>
<div class="col-md-4">
<canvas id="pieChart"></canvas>
</div>
</div>
<div class="col-md-4">
<br />
</div>
</div>
<script>
function AprCalculation1() {
var vResult = true;
$("#errLA").html("");
$("#errTenure").html("")
$("#errRoi").html("")
if ($("#text_box_name2_emi").val() != '') {
if (parseFloat($("#text_box_name2_emi").val()) == 0) {
vResult = false;
$("#errTenure").html(" < span class = 'red' > Loan term between 12 to 240 < /span>")
}
if (isNaN(parseFloat($("#text_box_name2_emi").val()))) {
$("#errTenure").html(" < span class = 'red' > Loan term between 12 to 240 < /span>")
vResult = false;
}
} else {
vResult = false;
$("#errTenure").html(" < span class = 'red' > Loan term between 12 to 240 < /span>")
}
if ($("#text_box_name1_emi").val() != '') {
if (parseFloat($("#text_box_name1_emi").val()) > 100) {
vResult = false;
$("#errRoi").html(" < span class = 'red' > Interest Rate between 1 and 100 < /span>");
}
if (parseFloat($("#text_box_name1_emi").val()) == 0) {
vResult = false;
$("#errRoi").html(" < span class = 'red' > Interest Rate between 1 and 100 < /span>");
}
if (isNaN(parseFloat($("#text_box_name1_emi").val()))) {
$("#errRoi").html(" < span class = 'red' > Interest Rate between 1 and 100 < /span>");
vResult = false;
}
} else {
$("#errRoi").html(" < span class = 'red' > Enter Interest Rate < /span>");
vResult = false;
}
if ($("#text_box_name_emi").val() != '') {
if (parseFloat($("#text_box_name_emi").val()) == 0) {
vResult = false;
$("#errLA").html(" < span class = 'red' > Enter Loan amount < /span>");
}
if (isNaN(parseFloat($("#text_box_name_emi").val()))) {
$("#errLA").html(" < span class = 'red' > Loan amount should be greater than zero < /span>");
vResult = false;
}
} else {
vResult = false;
$("#errLA").html(" < span class = 'red' > Enter Loan amount < /span>");
}
if ($("#text_box_fee_emi").val() != '') {
if (parseFloat($("#text_box_fee_emi").val()) >= parseFloat($("#text_box_name_emi").val())) {
$("#errFee").html(" < span class = 'red' > Loan origination charges cannot be greater than loan amount. < /span>");
vResult = false;
}
if (isNaN(parseFloat($("#text_box_fee_emi").val()))) {
$("#errFee").html(" < span class = 'red' > Loan origination charges should be greater than zero < /span>")
vResult = false;
}
} else {
vResult = false;
$("#errFee").html(" < span class = 'red' > Enter Loan origination charge < /span>");
}
if (vResult) {
if (parseFloat($("#text_box_name2_emi").val()) > 240) {
$("#errTenure").html(" < span class = 'red' > Loan term between 12 to 240 < /span>")
}
else {
Apr1();
}
} else {
document.getElementById("aprInterest").innerHTML = "APR Interest: < br / > < span > 0.00 < /span> % ";
}
}
function Apr1() {
var p = document.getElementById("text_box_name_emi");
var r = document.getElementById("text_box_name1_emi");
var t = document.getElementById("text_box_name2_emi");
var f = document.getElementById("text_box_fee_emi");
var periods = parseFloat(t.value);
var loanamt = parseFloat(p.value);
var charges = parseFloat(f.value);
var loanAmount = parseFloat(p.value);
var interestRate = parseFloat(r.value) / 1200; // Monthly interest rate
var loanTerm = parseFloat(t.value); // Loan term in months
var loanCharges = parseFloat(f.value);
// Total principal amount (loan amount + charges)
var totalPrincipal = loanAmount + loanCharges;
// Calculate monthly payment (EMI)
var monthlyPayment = (loanamt * interestRate) / (1 - Math.pow(1 + interestRate, -periods));
// Calculate total payments (principal + interest)
var totalPayments = monthlyPayment * loanTerm;
// Calculate total interest paid
var totalInterestPaid = (monthlyPayment * loanTerm) - totalPrincipal;
// Calculate payoff date
var currentDate = new Date();
var payoffDate = new Date(currentDate.setMonth(currentDate.getMonth() + loanTerm));
// Format payoff date
var formattedPayoffDate = payoffDate.toLocaleDateString("en-US", {
year: 'numeric',
month: 'long',
day: 'numeric'
});
var present = parseFloat(loanamt) - parseFloat(charges);
var guess = 0.01,
future = 0,
type = 0;
var ROI = parseFloat(r.value) / 100;
var rateI = ROI / 12,
fv = 0;
var pvif = Math.pow(1 + rateI, periods);
var pmt = rateI / (pvif - 1) * -(loanamt * pvif + fv);
var payment = pmt;
var epsMax = 1e-10;
var iterMax = 10;
var rate = guess;
if (Math.abs(rate) < epsMax) {
y = present * (1 + periods * rate) + payment * (1 + rate * type) * periods + future;
} else {
f = Math.exp(periods * Math.log(1 + rate));
y = present * f + payment * (1 / rate + type) * (f - 1) + future;
}
y0 = present + payment * periods + future;
y1 = present * f + payment * (1 / rate + type) * (f - 1) + future;
i = x0 = 0;
x1 = rate;
while ((Math.abs(y0 - y1) > epsMax) && (i < iterMax)) {
rate = (y1 * x0 - y0 * x1) / (y1 - y0);
x0 = x1;
x1 = rate;
if (Math.abs(rate) < epsMax) {
y = present * (1 + periods * rate) + payment * (1 + rate * type) * periods + future;
} else {
f = Math.exp(periods * Math.log(1 + rate));
y = present * f + payment * (1 / rate + type) * (f - 1) + future;
}
y0 = y1;
y1 = y;
++i;
}
var rate1 = rate * 100;
var ddk = rate1 * 12;
var APR = ddk.toFixed(2);
document.getElementById("aprInterest").innerHTML = "APR Interest: < span > " + APR + " < /span> % ";
document.getElementById("emiamount").innerHTML = "Estimated Monthly Payment: ₹ < span > " + monthlyPayment.toFixed(2) + " < /span>";
document.getElementById("totalPayments").innerHTML = "Number of Payments: < span > " + loanTerm + " < /span>";
document.getElementById("totalInterestPaid").innerHTML = "Total Interest Paid: ₹ < span > " + totalInterestPaid.toFixed(2) + " < /span>";
document.getElementById("totalCharges").innerHTML = "Processing Fee : ₹ < span > " + charges.toFixed(2) + " < /span>";
document.getElementById("payoffDate").innerHTML = "Payoff Date: < span > " + formattedPayoffDate + " < /span>";
document.getElementById("totalAmountPaid").innerHTML = "Total Payments: ₹ < span > " + totalPayments.toFixed(2) + " < /span>";
// Render pie chart
const ctx = document.getElementById('pieChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Principal Amount', 'Interest Paid', "Processing Fee"],
datasets: [{
data: [(totalPrincipal - charges).toFixed(2), totalInterestPaid.toFixed(2), charges],
backgroundColor: ['#6a1b9a', '#1e88e5', '#910000']
}]
},
options: {
plugins: {
legend: {
position: 'bottom'
}
}
}
});
}
</script>
0 comments:
Post a Comment