const myChart = document.getElementById("myChart");
                    const btnSubmit = document.querySelector("#btnSelect");
                    const loanAmountArea = document.getElementById("loanAmount");
                    const loanTermArea = document.getElementById("payments");
                    const loanRateArea = document.getElementById("rate");
                    const chartArea = document.querySelector("#chartArea");
                    const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});
                    
                    let chartLabels = ['Principal', 'Interest'];
                    let tableHeaders = ['Month', 'Payment', 'Principal', 'Interest', 'Total Interest Paid', 'Remaining Balance'];
                    let lifetimeInt = 0;
                    let monthlyPmt = 0;
                    var lcChart;
                    let chartData = [];
                    
                    function buildChart() {
                        Chart.defaults.global.defaultFontFamily = 'Luckiest Guy';
                        Chart.defaults.global.defaultFontSize = 18;
                        Chart.defaults.global.defaultFontColor = '#777';
                    
                        lcChart = new Chart(myChart, {
                            type: 'doughnut',
                            data: {
                                labels: chartLabels,
                                datasets:[{
                                    label: 'Totals',
                                  // data:[monthlyPmt, interestAmount],
                                    data: chartData,
                                    backgroundColor: ['blue', 'red'],
                                    borderWidth: 1,
                                    borderColor: '#777',
                                    hoverBorderWidth: 2,
                                    hoverBorderColor: '#000'
                                }]
                            },
                            opitons: {
                                title: {
                                    display: true,
                                    text: 'Monthly Totals for Loan',
                                    fontSize: 25
                                },
                                legend: {
                                    diplay: true,
                                    position: 'right',
                                    layout: {
                                        padding:{left:0,right:0,bottom:0,top:0}
                                    }
                                }, 
                                tooltips:{
                                    enabled:true
                                }
                            }
                        });
                    
                        
                    } //end build chart 
                    
                    //Function buildTable 
                    function buildTable(){
                        //includes template literal for table that does not show well on prism
                        let myHTML = `
                        

                            

                                
                            
                        
                        `;
                    
                        //insert the basic table structure 
                        let pcTag = document.getElementById("pageContainer");
                        pcTag.insertAdjacentHTML("beforeend", myHTML);
                    
                        //insert table headers
                        tableHeaders.forEach(addTableHeader);
                    
                        //insert the data into the table body
                        let totalPrincipalPaid = 0;
                        let totalInterestPaid = 0;
                        let remainingBalance = loanAmount - totalPrincipalPaid;
                        for(let i=1; i<=loanTermArea.value; i++){
                            //loop through data
                            let interestAmount = remainingBalance * loanRateArea.value/1200;
                            let principalAmount = monthlyPmt - interestAmount;
                            let rowId = "row" + i;
                    
                            //keep track of totals
                            totalPrincipalPaid += monthlyPmt - interestAmount;
                            totalInterestPaid += interestAmount;
                            remainingBalance = loanAmount - totalPrincipalPaid;
                    
                            //insert the table row element
                            myHTML = ``;
                            document.getElementById("tableBody").insertAdjacentHTML("beforeend", myHTML);
                    
                            //insert data into rows
                            let row = document.getElementById(rowId);
                    
                            // //insert the payment number 
                            myHTML =  "" + i + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                     
                    
                            //insert payment amount
                            myHTML = "" + formatter.format(monthlyPmt) + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                    
                            //insert the prinicipal amount
                            myHTML = "" + formatter.format(principalAmount) + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                    
                            //insert interest amount
                            myHTML = "" + formatter.format(interestAmount) + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                    
                            //insert total interest paid
                            myHTML = "" + formatter.format(totalInterestPaid) + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                    
                            //insert remaining balance
                            myHTML = "" + formatter.format(remainingBalance) + ""
                            row.insertAdjacentHTML("beforeend", myHTML);
                        
                        } // end for loop 
                        
                    } // end build table 
                    
                    function addTableHeader(item) {
                        document.getElementById("tableHeaders").insertAdjacentHTML("beforeend", `${item}`);
                    }
                    
                    //calculate the monthly loan amount
                    function calculate(e) {
                    
                        if(loanAmount != 0) {
                            lifetimeInt = 0;
                            loanAmount = 0;
                            monthlyPmt = 0;
                        //    document.getElementById("tableContainer").remove();
                        }
                    
                        e.preventDefault();
                    
                        let loanRate = loanRateArea.value;
                        let pmtsCount = loanTermArea.value;
                    
                        let rate = loanRate/1200;
                        let numerator = rate * ((1+rate)**pmtsCount);
                        let denominator = ((1+ rate)**pmtsCount) - 1;
                    
                        loanAmount = loanAmountArea.value;
                        monthlyPmt = loanAmount * (numerator/denominator);
                        lifetimeInt = (monthlyPmt * pmtsCount) - loanAmount;
                        let monthlyInt = loanAmount * rate;
                        formatter.format(monthlyPmt);
                        formatter.format(monthlyInt);
                        chartData = [parseFloat(monthlyPmt).toFixed(2), monthlyInt.toFixed(2)];
                    
                        if(loanAmount != 0){
                            if(lcChart){
                                lcChart.data.datasets[0].data = chartData;
                    
                                lcChart.update();
                            } else {
                                buildChart();
                            }
                            buildTable();
                        }
                    }
                                        
                    
                

The Code is structured into four functions.

Loan Shark

Loan Shark is a loan calculator that is broken into four functions

The built chart function is used to build a chart.js doughnut chart that contains the monthly prinicipal payment and the monthly interest payment.

The build table function uses template literals to setup and insert each row of the table.

The add table header function inserts the headers at the top of the table

The calculate function calculates values based on the input values. This inclues loan amount, monthly payments, monthly interest, and lifetime interest. It also inserts the data into the doughnut chart and calls the build chart and build table functions.