Sujay's Free Tools(loan calculator tool)
Creating a complete responsive loan calculator tool involves a bit of code, so I'll provide you with a basic example using HTML, CSS, and JavaScript. I'll keep it simple and functional. For styling, I'll use the Bootstrap library for simplicity. Make sure to include the Bootstrap CDN in your HTML file.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loan Calculator</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.calculator-container {
max-width: 400px;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container calculator-container">
<h2 class="text-center mb-4">Loan Calculator</h2>
<form id="loanForm">
<div class="mb-3">
<label for="loanAmount" class="form-label">Loan Amount</label>
<input type="number" class="form-control" id="loanAmount" placeholder="Enter loan amount" required>
</div>
<div class="mb-3">
<label for="interestRate" class="form-label">Annual Interest Rate (%)</label>
<input type="number" class="form-control" id="interestRate" placeholder="Enter annual interest rate" required>
</div>
<div class="mb-3">
<label for="loanTerm" class="form-label">Loan Term (years)</label>
<input type="number" class="form-control" id="loanTerm" placeholder="Enter loan term" required>
</div>
<button type="button" class="btn btn-primary" onclick="calculateLoan()">Calculate</button>
</form>
<div id="results" class="mt-4"></div>
</div>
<!-- Bootstrap JS and Popper.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function calculateLoan() {
// Get input values
var loanAmount = parseFloat(document.getElementById('loanAmount').value);
var interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12;
var loanTerm = parseFloat(document.getElementById('loanTerm').value) * 12;
// Calculate monthly payment using the formula
var monthlyPayment = (loanAmount * interestRate) / (1 - Math.pow(1 + interestRate, -loanTerm));
// Display results
var resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = `
<h4 class="mb-3">Loan Details</h4>
<p><strong>Loan Amount:</strong> $${loanAmount.toFixed(2)}</p>
<p><strong>Annual Interest Rate:</strong> ${document.getElementById('interestRate').value}%</p>
<p><strong>Loan Term:</strong> ${document.getElementById('loanTerm').value} years</p>
<h4 class="mt-4">Monthly Payment</h4>
<p><strong>${monthlyPayment.toFixed(2)}</strong></p>
`;
}
</script>
</body>
</html>
```
This code uses Bootstrap for styling, and JavaScript to calculate and display the monthly payment. You can copy this code into an HTML file and open it in a web browser to see the loan calculator in action.
Comments
Post a Comment