Add Tractor Loan Calculator HTML Javascript Code:
- 1.) Go to www.blogger.com.
- 2.) Login using your Gmail Account.
- 3.) After login, the Blogger Dashboard will open
- 4.) Click and Select The Blog where you want to add the code
- 5.) From the left menu, click on Layout and go to layout
- 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)
- 7.) From the gadget list, click HTML/JavaScript
- 8.) Click Save.
- 9.) Click Save Arrangement.
- 10.) Click View Blog and Check Your Blog.
- 11.) Your HTML / JavaScript widget is Now Live.
Tractor Loan Calculator HTML Javascript Code :
<!doctype html>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
background: #e0f2f1;
font-family: 'Segoe UI', sans-serif;
padding: 30px 0;
}
.calculator-card {
background: #fff;
width: 380px;
border-radius: 25px;
padding: 30px 25px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
}
.calculator-card h2 {
font-size: 24px;
color: #00796b;
margin-bottom: 20px;
}
.calculator-card .small-text {
font-size: 13px;
color: #555;
margin-bottom: 12px;
}
.calculator-card input,
.calculator-card select {
width: 100%;
margin-bottom: 14px;
padding: 12px 15px;
border-radius: 12px;
border: 1px solid #b2dfdb;
font-size: 14px;
transition: 0.3s;
}
.calculator-card input:focus,
.calculator-card select:focus {
border-color: #00796b;
outline: none;
box-shadow: 0 0 8px rgba(0,121,107,0.2);
}
.calculator-card button {
background: #00796b;
color: #fff;
border: none;
padding: 14px 20px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
width: 100%;
font-size: 16px;
transition: 0.3s;
}
.calculator-card button:hover {
background: #004d40;
}
.result {
margin-top: 18px;
font-size: 15px;
line-height: 1.6;
color: #004d40;
text-align: left;
font-weight: 500;
}
.table-container table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-top: 15px;
border-radius: 12px;
overflow: hidden;
}
.table-container table th,
.table-container table td {
border: none;
padding: 8px 6px;
text-align: center;
}
.table-container table th {
background: #00796b;
color: #fff;
}
.table-container table tr:nth-child(even) td {
background: #e0f2f1;
}
.table-container table tr:nth-child(odd) td {
background: #f1f8f7;
}
@media(max-width:400px){
.calculator-card{width:95%;}
}
</style>
<div class="calculator-card">
<div class="small-text">Regular Rate • EMI Calculator</div>
<h2>🚜 Tractor Loan</h2>
<input type="number" id="loan" placeholder="Loan Amount (₹)">
<input type="number" id="rate" placeholder="Interest Rate %">
<select id="freq">
<option value="12">Monthly EMI</option>
<option value="4">Quarterly EMI</option>
<option value="2">Half-Yearly EMI</option>
<option value="1">Yearly EMI</option>
</select>
<select id="tenure">
<option value="12">1 Year</option>
<option value="18">1 Year 6 Months</option>
<option value="24">2 Years</option>
<option value="30">2 Years 6 Months</option>
<option value="36">3 Years</option>
<option value="42">3 Years 6 Months</option>
<option value="48">4 Years</option>
<option value="54">4 Years 6 Months</option>
<option value="60">5 Years</option>
<option value="66">5 Years 6 Months</option>
<option value="72">6 Years</option>
</select>
<button onclick="calcLoan()">Calculate EMI</button>
<div class="result" id="result"></div>
<div class="table-container" id="tableContainer"></div>
</div>
<script>
function calcLoan() {
let P = parseFloat(document.getElementById("loan").value);
let R = parseFloat(document.getElementById("rate").value);
let F = parseInt(document.getElementById("freq").value);
let tenureMonths = parseInt(document.getElementById("tenure").value);
let totalYears = tenureMonths / 12;
let n = totalYears * F;
let r = (R / 100) / F;
if (isNaN(P) || isNaN(R)) {
alert("Please fill Loan Amount & Interest Rate");
return;
}
let emi = (P * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
let total = emi * n;
let interest = total - P;
document.getElementById("result").innerHTML = `
<b>Loan Amount:</b> ₹${P.toFixed(0)}<br>
<b>EMI Amount:</b> ₹${emi.toFixed(0)}<br>
<b>Total Interest:</b> ₹${interest.toFixed(0)}<br>
<b>Total Payable:</b> ₹${total.toFixed(0)}<br>
<b>Rate Type:</b> Regular (Reducing Balance)
`;
let balance = P;
let html = `<table><tr><th>#</th><th>EMI</th><th>Principal</th><th>Interest</th><th>Balance</th></tr>`;
for(let i=1;i<=n;i++){
let intPart = balance * r;
let principal = emi - intPart;
balance -= principal;
if(balance<0) balance = 0;
html += `<tr>
<td>${i}</td>
<td>₹${emi.toFixed(0)}</td>
<td>₹${principal.toFixed(0)}</td>
<td>₹${intPart.toFixed(0)}</td>
<td>₹${balance.toFixed(0)}</td>
</tr>`;
}
html += `</table>`;
document.getElementById("tableContainer").innerHTML = html;
}
</script>
</!doctype>
Comments
Post a Comment