<form>
      <label for="principal-loan">
        Principal loan amount
        <input type="text" name="principal-loan" id="principal-loan" />
      </label>
      <label for="interest-rate">
        Interest rate
        <div>
          <input type="text" name="interest-rate" id="interest-rate" /><span
            >%</span
          >
        </div>
      </label>
      <label for="length-loan">
        Length of Loan
        <div>
          <input type="text" name="length-loan" id="length-loan" />
          <span>years</span>
        </div>
      </label>
      <input type="submit" value="Calculate" id="submit" />
    </form>
    <p id="payment"></p>
html,
body {
  height: 100vh;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: whitesmoke;
  font-size: 1.15em;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 35%;
  height: 15em;
  padding: 1em;
  background: white;
  border: 1px solid black;
  border-radius: 5px;
}

label {
  display: flex;
  flex-direction: column;
  width: 95%;
  font-size: 1.25em;
}
span {
  margin-left: 0.3em;
}
input {
  width: 75%;
}
.error {
  border: 1px red solid;
}
input[type="submit"] {
  width: 10em;
  border: none;
  border-radius: 5px;
  padding: 0.5em 1em;
  background: rgb(47, 47, 150);
  color: white;
  font-size: 0.85em;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: rgb(63, 63, 199);
}

input[type="submit"]:active {
  background: rgb(47, 47, 150);
}

@media (max-width: 700px) {
  form {
    width: 90%;
  }
}

document.getElementById("submit").addEventListener("click", calculate);

function calculate(event) {
  event.preventDefault();
  const p = document.getElementById("principal-loan").value;
  let r = document.getElementById("interest-rate").value;
  let n = document.getElementById("length-loan").value;

  if (isNaN(p) || isNaN(r) || isNaN(n) || !p.length || !r.length || !n.length) {
    if (isNaN(p) || !p.length) {
      document.getElementById("principal-loan").classList.add("error");
    } else {
      document.getElementById("principal-loan").classList.remove("error");
    }
    if (isNaN(r) || !r.length) {
      document.getElementById("interest-rate").classList.add("error");
    } else {
      document.getElementById("interest-rate").classList.remove("error");
    }
    if (isNaN(n) || !n.length) {
      document.getElementById("length-loan").classList.add("error");
    } else {
      document.getElementById("length-loan").classList.remove("error");
    }
    document.getElementById("payment").innerText = "";
    return false;
  } else {
    document.getElementById("principal-loan").classList.remove("error");
    document.getElementById("interest-rate").classList.remove("error");
    document.getElementById("length-loan").classList.remove("error");
  }

  r = r / 100 / 12;
  n *= 12;
  let payment = p * ((r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1));

  document.getElementById("payment").innerText =
    "Your monthly mortgage payment will be $" + parseInt(payment);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.