// values for end results

                        let monthlyPayment = 0;
                        let totalPrincipal = 0;
                        let totalInterest = 0;
                        let totalCost = 0;

                        // get other elements

                        let button = document.getElementById("wolfBtn");
                        let monthlyPaymentElement = document.getElementById("monthlyPayment");
                        let totalPrincipalElement = document.getElementById("totalPrincipal");
                        let totalInterestElement = document.getElementById("totalInterest");
                        let totalCostElement = document.getElementById("totalCost");
                        let tableBody = document.getElementById("tableBody");


                        function start() {
                            // get values
                            let loanAmount = document.getElementById("loanAmount").value;
                            let payments = document.getElementById("payments").value;
                            let rate = document.getElementById("rate").value;

                            // convert values to integers
                            loanAmount = Number.parseInt(loanAmount);
                            payments = Number.parseInt(payments);
                            rate = Number.parseInt(rate);

                            // check if conversion was successfull

                            let success = Number.isInteger(loanAmount) && Number.isInteger(payments) &&
                            Number.isInteger(rate) ? true : false;

                            if (!success) {
                                console.log(`${loanAmount} ${payments} ${rate}`)
                                alert("You need to enter integer values in order to continue...");
                            } else {
                                getNumbers(loanAmount, payments, rate);
                                emptyElements();
                                printResults(payments, rate, loanAmount);
                            }
                        }

                        function getNumbers(loanAmount, payments, rate) {
                            // calculate rates
                            monthlyPayment = ((loanAmount) * (rate / 1200) / (1 - (Math.pow(1 + rate / 1200, -payments))));
                            totalPrincipal = loanAmount;
                            totalCost = (monthlyPayment * payments);
                            totalInterest = (totalCost - totalPrincipal);
                        }

                        // empty all elements for next use
                        function emptyElements() {
                            monthlyPaymentElement.innerHTML = "";
                            totalPrincipalElement.innerHTML = "";
                            totalInterestElement.innerHTML = "";
                            totalCostElement.innerHTML = "";
                            tableBody.innerHTML = "";
                        }

                        function printResults(payments, rate, loanAmount) {
                            // return values to top elements
                            monthlyPaymentElement.innerHTML += `$${monthlyPayment.toFixed(2)}`;
                            totalPrincipalElement.innerHTML += `$${loanAmount}`;
                            totalInterestElement.innerHTML += `$${totalInterest.toFixed(2)}`;
                            totalCostElement.innerHTML += `$${totalCost.toFixed(2)}`

                            // create variables to keep up with payments
                            let balance = loanAmount;
                            let currentInterest = balance * (rate / 1200);
                            let principal = monthlyPayment - currentInterest;
                            let totalInterestPaid = currentInterest;
                            balance -= principal;

                            // insert values in table
                            for (let i = 1; i <= payments; i++) { tableBody.innerHTML +=` 
                                ${i}
                                $${monthlyPayment.toFixed(2)}
                                $${principal.toFixed(2)}
                                $${currentInterest.toFixed(2)}
                                $${totalInterestPaid.toFixed(2)}
                                $${balance.toFixed(2)}
                                
                                `;

                                // update values
                                currentInterest = balance * (rate / 1200);
                                principal = monthlyPayment - currentInterest;
                                totalInterestPaid += currentInterest;
                                balance -= principal;
                            }
                        }

                            button.addEventListener('click', start);
                    

The Code is structured in four functions

First we select all the elements we need and create some variables to help us later with the calculations.

start

Start is the main function. First we get the values from the form and then we parse the values to integers. Next, using the ternary operator we check if the values have been successfully parsed. If any of them was not, we return an alert. If everything goes well, we then call the getNumbers function where we pass in the values that we parsed earlier, followed by the emptyElements function and we end with the printResults where we pass the same values.

getNumbers

In this function we calculate the rates with the formula provided, and we save the result in the global variables we created at the beginning.

emptyElements

This function does exactly that. It empties the elements where we need to insert the data of the calculations.

printResults

In this final function we first populate the elements at the top of the page with the main figures, and using the .toFixed() function we make sure that we present to the ui only the amount of decimals specified in the brackets () . Next, using a for loop that counts from 1 to the numbers of payments and on each loop, using template strings (``) we create a table row element in wich we insert the values needed, helped again by the .toFixed() functions. Lastly, we update the values for the next loop.