Mortgage Repayment Calculator Solution

What are you most proud of, and what would you do differently next time?

I am very proud that I was able to finish this design. It took me a while but I was also working on another project as well. For next time, I'd probably implement more semantic tags for readability purposes.

What challenges did you encounter, and how did you overcome them?

One of the main challenges that I had was handling the logic for the input fields. Because I used type text, I couldnt just use checkValidity().

// Validate Mortgage Term
    if (!mortgageTerm.value.trim() || isNaN(parseInt(termValue)) || termValue 

### What specific areas of your project would you like help with?

clearBtn.addEventListener("click", () => {

// redefining due to scoping. Global placement didnt reference these variables

let amountError = document.querySelector(".amount-error");
let mortgageAmount = document.getElementById("mortgage-amount");
let poundSign = document.querySelector(".input-text-m");

let termError = document.querySelector(".error-term");
let mortgageTerm = document.getElementById("mortgage-term");
let yearSign = document.querySelector(".input-year");

let interestError = document.querySelector(".error-rate");
let interestField = document.getElementById("interest-rate");
let percentSign = document.querySelector(".input-percent");

let radioError = document.querySelector(".error-radio");

const resultDiv = document.querySelector(".result-container");
const resultPending = document.querySelector(".potential-results");
const monthPlan = document.querySelector(".month-plan");
const overTerm = document.querySelector(".over-term");

// referencing the form to clear it.
document.getElementById("mortgager").reset();
resultDiv.style.display = "none";
resultPending.style.display = "flex";
monthPlan.textContent = "";
overTerm.textContent = "";

amountError.style.display = "none";
mortgageAmount.classList.remove("error-input");
poundSign.classList.remove("error-span");


termError.style.display = "none";
mortgageTerm.classList.remove("error-input");
yearSign.classList.remove("error-span");

interestError.style.display = "none";
interestField.classList.remove("error-input");
percentSign.classList.remove("error-span");

radioError.style.display = "none";

document.getElementById("repayment").checked = false;
document.getElementById("interestO").checked = false;

});

If anyone has spare time, I need some assistance on how to **not** reference the inputs again when handling the clear button on all input fields. I tried putting all references inside of the global scope but then it started to affect the calculations for the main card. I referenced the variables again and it worked but I know this is not the most efficient thing to do.

Thank you for your time!