// get the values user entered
                        // controller
                        function getValues() {
                            let fizzValue = document.getElementById("fizzValue").value;
                            let buzzValue = document.getElementById("buzzValue").value;

                            // convert to int
                            fizzValue = parseInt(fizzValue);
                            buzzValue = parseInt(buzzValue);

                            // valudate is integers
                            if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
                                // call genrateNumbers
                                let fizzBuzz = generateFizzBuzz(fizzValue, buzzValue);

                                // call displayNumbers
                                displayFizzBuzz(fizzBuzz);
                            } 
                            else {
                                alert("You must enter integers");
                            }
                        }

                        // calculate fizz, buzz and fizzbuzz
                        // logic
                        function generateFizzBuzz(fv, bv) {
                            let fizzBuzz = [];

                            // loop to find each fizz, buzz and fizzbuzz
                            for (let i = 1; i <= 100; i++)
                            {
                                let item = "";

                                if (i % (fv * bv) == 0) {
                                    item = "FizzBuzz";
                                }
                                else if (i % bv == 0) {
                                    item = "Buzz";
                                }
                                else if (i % fv == 0) {
                                    item = "Fizz";
                                }
                                else {
                                    item = i;
                                }

                                // add to array
                                fizzBuzz.push(item);
                            }

                            return fizzBuzz;
                        }

                        // display fizzbuzz results
                        // view function
                        function displayFizzBuzz(fizzbuzz) {
                            // get area to place text
                            let tableBody = document.getElementById("results");

                            // get the html template to use
                            let templateRow = document.getElementById("fbTemplate");


                            // clear table
                            tableBody.innerHTML = "";

                            // loop array to create output from array
                            for (let i = 0; i < fizzbuzz.length; i += 5)
                            {
                                let tableRow = document.importNode(templateRow.content, true);

                                // grab the td put in an array
                                let rowCols = tableRow.querySelectorAll("td");
                                rowCols[0].textContent = fizzbuzz[i];
                                rowCols[1].textContent = fizzbuzz[i+1];
                                rowCols[2].textContent = fizzbuzz[i+2];
                                rowCols[3].textContent = fizzbuzz[i+3];
                                rowCols[4].textContent = fizzbuzz[i+4];

                                tableBody.appendChild(tableRow);
                            }
                        }

                    
                    

The Code is structured in three functions.

getValues

getValues function gets the values the user enter for Fizz and Buzz.

This also function as the controller for the application.

generateFizzBuzz

generateFizzBuzz function takes in the two numbers as parameters and creates an empty array at the begining.

Next we enter a for loop from 1 to 100. We use the i variable to determine if the number is a Fizz (1 % Fizz == 0) or a Buzz (i % Buzz == 0) or a FizzBuzz (i % (Fizz * Buzz) == 0) and finally if i does not match any conditions the just pass the value of i inot the array.

This returns an array with all the numbers from 1 to 100 with Fizz, Buzz and FizBuzz replacing the values as calculated.

displayFizzBuzz

displayFizzBuzz function will display the data in a 5 column table format.

First we get the area we are going to place the data by id ('results'). Next we get the html template object we are going to use by id ('fbTemplate').

Next we clear the display area of any previous results.

Then we create a for loop that lops over the length of the array passed in. We grab the table row template as an object. We then use css selector to get all the 'td' tags and put them in a variable.

We add each array item to a td tag by adding to a number to i as needed for each column (+1, +2, ...)

Once all the data has been add for that row, we append the table row data to the display area until the array is compelted.