Sujay's Free Tools(loan calculator)

 Below is a simple example of a loan calculator implemented in HTML, CSS, and JavaScript. I've used Bootstrap for styling to make it colorful and responsive. You can include the Bootstrap library by adding the appropriate CDN links in the <head> section of your HTML file.<!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>

  <!-- Include Bootstrap CSS -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>

    body {

      background-color: #f8f9fa;

    }


    .container {

      margin-top: 50px;

    }

  </style>

</head>

<body>


<div class="container">

  <h1 class="text-center mb-4">Loan Calculator</h1>


  <div class="row">

    <div class="col-md-6 offset-md-3">

      <form id="loan-form">

        <div class="mb-3">

          <label for="loan-amount" class="form-label">Loan Amount</label>

          <input type="number" class="form-control" id="loan-amount" required>

        </div>

        <div class="mb-3">

          <label for="interest-rate" class="form-label">Annual Interest Rate (%)</label>

          <input type="number" step="0.1" class="form-control" id="interest-rate" required>

        </div>

        <div class="mb-3">

          <label for="loan-term" class="form-label">Loan Term (years)</label>

          <input type="number" class="form-control" id="loan-term" required>

        </div>

        <button type="button" class="btn btn-primary" onclick="calculateLoan()">Calculate</button>

      </form>


      <div id="results" class="mt-4"></div>

    </div>

  </div>

</div>


<!-- Include Bootstrap JS and Popper.js -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>

  function calculateLoan() {

    const loanAmount = parseFloat(document.getElementById('loan-amount').value);

    const interestRate = parseFloat(document.getElementById('interest-rate').value);

    const loanTerm = parseFloat(document.getElementById('loan-term').value);


    const monthlyInterestRate = interestRate / 100 / 12;

    const numberOfPayments = loanTerm * 12;


    const numerator = monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments);

    const denominator = Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1;


    const monthlyPayment = (loanAmount * (numerator / denominator)).toFixed(2);


    const resultsDiv = document.getElementById('results');

    resultsDiv.innerHTML = `

      <h4>Loan Summary</h4>

      <p><strong>Loan Amount:</strong> $${loanAmount.toFixed(2)}</p>

      <p><strong>Annual Interest Rate:</strong> ${interestRate.toFixed(2)}%</p>

      <p><strong>Loan Term:</strong> ${loanTerm} years</p>

      <p><strong>Monthly Payment:</strong> $${monthlyPayment}</p>

    `;

  }

</script>


</body>

</html>This example uses Bootstrap for styling and responsiveness and includes a simple JavaScript function (calculateLoan) to perform the loan calculations and display the results dynamically. Adjust the styles and layout according to your preferences.

Comments

Post a Comment

Popular Posts