function getValues() {
                            let loan = parseFloat(document.getElementById('loanAmount').value);
                            let term = parseInt(document.getElementById('term').value);
                            let rate = parseFloat(document.getElementById('rate').value);
                        
                            let newLoan = {
                                loan,
                                term,
                                rate,
                            }
                        
                        
                            if (isNaN(loan) || isNaN(term) || isNaN(rate)
                                || loan <= 0 || term <= 0 || rate <= 0) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Woops!',
                                    text: 'Please Enter Valid Loan Details'
                                });
                        
                            } else {
                                return newLoan;
                            }
                        }
                        
                        function displayPayments() {
                        
                            let loan = getValues();
                        
                        
                            let monthlyPayment = (loan.loan) * (loan.rate / 1200) / (1 - (1 + loan.rate / 1200) ** (-loan.term));
                        
                            let totalPrin = loan.loan;
                            let totalCost = monthlyPayment * loan.term;
                            let totalint = totalCost - totalPrin;
                        
                            document.getElementById('monthlyPayment').innerText = '$' + monthlyPayment.toFixed(2);
                            document.getElementById('totalPrin').innerText = '$' + totalPrin.toFixed(2);
                            document.getElementById('totalint').innerText = '$' + totalint.toFixed(2);
                            document.getElementById('totalCost').innerText = '$' + totalCost.toFixed(2);
                        
                            displayTable(loan);
                        
                        }
                        
                        function generateStats(loan) {
                        
                            let remBalance = loan.loan;  
                            let stats = []; 
                        
                            for (let month = 1; month <= loan.term; month++) {
                        
                                // calculate my numbers here
                                let monthlyPayment = (loan.loan) * (loan.rate / 1200) / (1 - (1 + loan.rate / 1200) ** (-loan.term));
                                let interest = remBalance * loan.rate / 1200;
                                let principalPayment = monthlyPayment - interest;
                                let totalint = interest + interest;
                                let balance = remBalance -= principalPayment;
                        
                        
                                let payment = {
                                    month,
                                    monthlyPayment,
                                    principal: principalPayment,
                                    interest,
                                    totalInterest: totalint,
                                    balance,
                                }
                        
                                stats.push(payment);
                                // push the payment into an array
                            }
                            return stats;
                            // return the array
                        }
                        
                        function displayTable(loan) {
                        
                        
                            let tableContent = document.getElementById("table-content");
                            let tableTemplate = document.getElementById('table-row-template');
                        
                            tableContent.innerHTML = "";
                        
                            let payments = generateStats(loan);
                        
                            payments.forEach(payment => {
                                // copy template and display on table
                                let tableRow = tableTemplate.content.cloneNode(true);
                        
                                tableRow.querySelector('[data-id="month"]').innerText = payment.month;
                                tableRow.querySelector('[data-id="payment"]').innerText = '$' + payment.monthlyPayment.toFixed(2);
                                tableRow.querySelector('[data-id="principal"]').innerText = '$' + payment.principal.toFixed(2);
                                tableRow.querySelector('[data-id="Interest"]').innerText = '$' + payment.interest.toFixed(2);
                                tableRow.querySelector('[data-id="totalint"]').innerText = '$' + payment.totalInterest.toFixed(2);
                                tableRow.querySelector('[data-id="balance"]').innerText = '$' + Math.abs(payment.balance).toFixed(2);
                        
                                tableContent.appendChild(tableRow);
                            });
                        
                        }
                    
                

The Code is structured in fout functions

getValues

: This function is responsible for getting and validating user input from the input fields in the loan amount, loan term, and interest rate input form. It parses these values and creates an object newLoan containing these values. If any of the input values are not valid '(NaN, less than or equal to zero)', it displays an error message. If the input is valid, it returns the newLoan object.

displayPayments

This function calculates and displays various loan payment details based on the user input obtained from getValues(). It calculates the monthly payment, total principal, total interest, and total cost of the loan using the provided loan amount, term, and interest rate. Finally, it updates the HTML page with these calculated values.

generateStats

This function generates a list of payment details over the course of the loan term. It takes the loan object as an argument and calculates the details for each monthly payment. It iterates through each month, calculating the monthly payment, interest, principal payment, total interest paid so far, and the remaining loan balance. It stores this information in an array called stats and returns it to be displayed on the webpage table.

displayTable

This function first clears any previous table content if there is any. Then, it retrieves the payment statistics using generateStats(loan) and iterates through the statistics, creating a new table row for each month. It fills in the table cells with the corresponding payment details, such as month number, monthly payment, principal, interest, total interest, and remaining balance.