The Code

                    
                        function getNum() {
                            let loan = parseFloat(document.getElementById('loanAmount').value);
                            let term = parseInt(document.getElementById('Term').value);
                            let rate = parseFloat(document.getElementById('Rate').value);
                            if (isNaN(loan) == true || isNaN(term) == true || isNaN(rate) == true){
                                Swal.fire('All inputs must be numbers')
                            }
                            let payments = CreatePaymentObj(loan, term, rate);
                            displayPTable(payments);
                            displayTotals(loan, payments);
                        }
                        function displayPTable(payments) {
                        
                            const paymentTable = document.getElementById('paymentTable');
                          
                            const paymentTemplate = document.getElementById('table-row-template');
                            
                            paymentTable.innerHTML = '';
                        
                            for (let index = 0; index < payments.length; index++) {
                              
                                let month = payments[index];
                               
                                let tableRow = paymentTemplate.content.cloneNode(true);
                     
                                tableRow.querySelector('[data-id="month"]').innerText = month.month;
                                tableRow.querySelector('[data-id="payment"]').innerText = month.payment.toLocaleString("en-US", {style:"currency", currency:"USD"});
                                tableRow.querySelector('[data-id="principle"]').innerText = month.principle.toLocaleString("en-US", {style:"currency", currency:"USD"});
                                tableRow.querySelector('[data-id="interest"]').innerText = month.interest.toLocaleString("en-US", {style:"currency", currency:"USD"});
                                tableRow.querySelector('[data-id="tInterest"]').innerText = month.tInterest.toLocaleString("en-US", {style:"currency", currency:"USD"});
                                tableRow.querySelector('[data-id="balance"]').innerText = month.balance.toLocaleString("en-US", {style:"currency", currency:"USD"});
            
                                paymentTable.appendChild(tableRow);
                            }
                        }
                        
                        function displayTotals(principle, payments) {
                        
                            document.getElementById("monthlyPay").innerHTML = payments[0].payment.toLocaleString("en-US", {style:"currency", currency:"USD"});
                            document.getElementById('principle').innerHTML = principle.toLocaleString("en-US", {style:"currency", currency:"USD"});
                            document.getElementById('interest').innerHTML = payments[payments.length-1].tInterest.toLocaleString("en-US", {style:"currency", currency:"USD"});
                            document.getElementById('cost').innerText = (principle + payments[payments.length-1].tInterest).toLocaleString("en-US", {style:"currency", currency:"USD"});
                        
                        }
                        
                        function CreatePaymentObj(loan, term, rate) {
                            payments= [];
                            let balance = loan;
                            let tInterest = 0;
                            tMonthlyPayment = (loan * (rate / 1200)) / (1 - (1 + (rate / 1200)) ** -term);

                            for (let i = 1; i <= term; i++) {
                                let interest = (balance * (rate / 1200));
                                tInterest = tInterest + interest;
                                let principle = tMonthlyPayment - interest;
                                balance = balance+interest-tMonthlyPayment;
                                if (balance <= 0){
                                    balance = 0;
                                }
                                let newPayment = {
                                    month: i,
                                    payment: tMonthlyPayment,
                                    principle: principle,
                                    interest: interest,
                                    tInterest: tInterest,
                                    balance: balance,
                                };
                                payments.push(newPayment);
                            }
                            return payments;
                        }
                    
                

There are multiple funtions in this program in order to take 3 user inputs (loan amount, term, and interest rate) and return a table with a detailed breakdown of monthly payments.

getNum

This function retrieves the values from the respective input fields, converts them to the appropriate data types, and then calls two other functions: CreatePaymentObj(loan, term, rate) and displayPTable(payments). If any of the inputs are not numbers, then a sweetalert is displayed

displayPTable

This function takes an array of payment objects as input and displays them in an HTML table on the web page. It finds the table element with the ID paymentTable, clears its content, and then iterates through the payments array to create and insert table rows for each payment object. The data from each payment object (e.g., month, payment amount, principle, interest, total interest, and balance) is formatted and inserted into the corresponding cells of the table row.

displayTotals

This function takes the initial loan amount (principle) and the array of payment objects (payments) as input. It calculates and displays the monthly payment amount, the total interest paid, and the total cost (loan amount + total interest) on the web page.

CreatePaymentObj

This function is responsible for calculating the loan payment details for each month and returns an array of payment objects. It takes the loan amount (loan), the loan term in months (term), and the interest rate per annum (rate) as input. It then iterates through each month, calculating the interest and principle payments for that month based on the loan amount, term, and interest rate. The function keeps track of the total interest paid (tInterest) and the remaining balance after each payment. The payment details for each month are stored in an object and pushed into the payments array, which is then returned at the end.