//get the values from the input
                    //CONTROLLER (start) function
                    function getValues(){
                        //get values from the page
                        let fizzValue = document.getElementById("fizzValue").value;
                        let buzzValue = document.getElementById("buzzValue").value;
                    
                        //parse into integers
                        fizzValue = parseInt(fizzValue);
                        buzzValue = parseInt(buzzValue);
                    
                        //validate numbers
                        if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
                            //call fizzBuzz
                            let fbArray = fizzBuzz(fizzValue, buzzValue);
                            //call displayData
                            displayData(fbArray)
                        } else {
                            alert("Enter only integers");
                        }
                    
                    }
                    
                    //LOGIC function(s)
                    function fizzBuzz(fizzValue, buzzValue) {
                        let array = [];
                        for(let i=1; i<=100; i++){
                            let value = ((i % fizzValue == 0 ? 'Fizz' : '') + (i % buzzValue == 0 ? 'Buzz' : '') || i);
                            array.push(value);
                        }
                        return array;
                    }
                    
                    //VIEW function(s)
                    function displayData(fbArray){
                    
                        //get the table body element from the page
                        let tableBody = document.getElementById("results");
                    
                        //get the template row
                        let templateRow = document.getElementById("fizzBuzzTemplate");
                    
                        //clear the table
                        tableBody.innerHTML = "";
                    
                        //display data on the table
                        for(let i=0; i fbArray.length; i+=5){   //i < fbArray, code does not render correctly
                            let tableRow = document.importNode(templateRow.content, true);
                            //grab the td content & put into an array
                            let rowCols = tableRow.querySelectorAll("td");
                            rowCols[0].classList.add(fbArray[i]);
                            rowCols[0].textContent = fbArray[i];
                    
                            rowCols[1].classList.add(fbArray[i+1]);
                            rowCols[1].textContent = fbArray[i+1];
                    
                            rowCols[2].classList.add(fbArray[i+2]);
                            rowCols[2].textContent = fbArray[i+2];
                    
                            rowCols[3].classList.add(fbArray[i+3]);
                            rowCols[3].textContent = fbArray[i+3];
                    
                            rowCols[4].classList.add(fbArray[i+4]);
                            rowCols[4].textContent = fbArray[i+4];
                    
                            tableBody.appendChild(tableRow);
                        }
                    
                       }
                    
                

The Code is structured as follows.

getValues

getValues is a function that uses DOM manipulation methods, such as getElementById to retrieve user input for fizz value and buzz value. Then numbers array is declared to store values between 1 and 100.

parseInt

parseInt validates the input type, if any value entered is not of integer data type it is automatically converted to an integer.

If Else

The if statement validates that both fizz value and buzz value are numbers.
Then fizzBuzz and displayData functions are called.
Furthermore, the user is alerted to only enter integers as input.

fizzBuzz

fizzBuzz function receives fizz value and buzz value as parameters. In a for loop, each number between 1 and 100 is then checked if divisible it is divisible by 3, 5 or both and replaced by 'Fizz', 'Buzz' and 'FizzBuzz' respectively. Then numbers array is returned.

displayData

displayData function displays all numbers from 1 to 100. Each row of the table is divided into 5 columns by incrementing the loop with 5 (line 47).

Table data or content from fizzbuzzTemplate is imported into tableRow using rowCols variable. Different font colors are added to each cell in table based on the predefined CSS class using classList (lines 51 to 64).

All the data generated is appended to the table rows (line 66).