Calcuator

<form id="loanForm">
  <label for="loanAmount">Loan amount:</label><br>
  <input type="number" id="loanAmount" name="loanAmount"><br>
  <label for="interestRate">Interest rate:</label><br>
  <input type="number" id="interestRate" name="interestRate"><br>
  <label for="loanTerm">Loan term (in months):</label><br>
  <input type="number" id="loanTerm" name="loanTerm"><br>
  <button type="submit">Calculate</button>
</form> 
<br>
<p>Monthly payment: <span id="monthlyPayment"></span></p>

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 8px;
}

input[type="number"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

const loanForm = document.getElementById("loanForm");
const loanAmount = document.getElementById("loanAmount");
const interestRate = document.getElementById("interestRate");
const loanTerm = document.getElementById("loanTerm");
const monthlyPayment = document.getElementById("monthlyPayment");

loanForm.addEventListener("submit", e =&gt; {
  e.preventDefault();

  const loanAmountValue = parseFloat(loanAmount.value);
  const interestRateValue = parseFloat(interestRate.value) / 100 / 12;
  const loanTermValue = parseFloat(loanTerm.value);

  const x = Math.pow(1 + interestRateValue, loanTermValue);
  const monthly = (loanAmountValue*x*interestRateValue)/(x-1);

  if (isFinite(monthly)) {
    monthlyPayment.innerHTML = monthly.toFixed(2);
  } else {
    monthlyPayment.innerHTML = "Error";
  }
});