JSFiddle - React, Tailwind, and code Playground

by gooeyteam

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mortgage Calculator</title>
  </head>
  <body>
    <h1>Mortgage Calculator</h1>
    <form>
      <label for="loanAmount">Loan Amount:</label>
      <input type="number" id="loanAmount" name="loanAmount" required><br><br>
      <label for="interestRate">Interest Rate:</label>
      <input type="number" id="interestRate" name="interestRate" required><br><br>
      <label for="loanTerm">Loan Term (in years):</label>
      <input type="number" id="loanTerm" name="loanTerm" required><br><br>
      <button type="button" onclick="calculateMonthlyPayment()">Calculate</button><br><br>
      <label for="monthlyPayment">Monthly Payment:</label>
      <input type="number" id="monthlyPayment" name="monthlyPayment" readonly>
    </form>
    <script>
      function calculateMonthlyPayment() {
        const loanAmount = document.getElementById("loanAmount").value;
        const interestRate = document.getElementById("interestRate").value / 100 / 12;
        const loanTerm = document.getElementById("loanTerm").value * 12;
        const monthlyPayment = (loanAmount * interestRate * Math.pow(1 + interestRate, loanTerm)) / (Math.pow(1 + interestRate, loanTerm) - 1);
        document.getElementById("monthlyPayment").value = monthlyPayment.toFixed(2);
      }
    </script>
  </body>
</html>