//1. Get the values from the page
                    //controller function
                    function getValues() {
                    
                    
                        //get the user values from the page
                        let fizztValue = document.getElementById("fizztValue").value;
                        let buzzValue = document.getElementById("buzzValue").value;
                        
                        //parse for numbers
                        fizztValue = parseInt(fizztValue);
                        buzzValue = parseInt(buzzValue);
                        
                        //check that the numebrs are integers
                        if(Number.isInteger(fizztValue) && Number.isInteger(buzzValue)){
                        
                            //We call fizzBuzz
                            let fbArray = fizzBuzz(fizztValue, buzzValue)
                            
                            //call displayData and write the values to the screen
                            displayData(fbArray);
                        
                        }
                        else {
                        
                            alert("You must enter integers");
                        }
    
                    }


                    function fizzBuzz(fizzValue, buzzValue){
                    //init the returnArray
                    let returnArray = [];
                    
                    //loop from 1 to 100
                    for(let i = 1; i <= 100; i++){ 
                        //we need check the current in three steps: 
                        // 1. check to see if divisible by both (3 and 5) 
                        // 2. check to see if divisible by fizz value (3) 
                        // 3. check to see if divisible by fizz value (3) 
                        // 4. If none, then push the number into the array                  
                        if((i % fizzValue==0) && (i % buzzValue==0)){

                             returnArray.push('FizzBuzz'); 

                        } else if (i % buzzValue==0){ 

                            returnArray.push('Buzz'); 

                        } else if (i % fizzValue==0){

                            eturnArray.push('Fizz'); 

                        } else{ 

                            returnArray.push(i); 
                        } 
                    } 

                    return returnArray; 
                }

                function displayData(fbArray){

    //get the table body from the page
    let tableBody = document.getElementById("results");

    //get the template row
    let templateRow = document.getElementById("fbTemplate");

    //clear table first 
    tableBody.innerHTML = "";

    for (let i = 0; i < fbArray.length; i += 5) {
       let tableRow = document.importNode(templateRow.content, true);

       //grab use the to put into 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 in three functions.

getValues.

getValues accepts (get) the user input from the page. It utilizes getElelemntById to pull the values from the page. It passes those values to the fizzBuzz function.

fizzBuzz

fizzBuzz takes in two parameters: fizzValue and buzzValue. We create a variable (returnArray) that holds an array. A for loop is used to gp from 1 throught 100 and checking thought each itetation using If/Else statements to check for multiples of Fizz value and Buzz Value. If it is muiltiple of Fizz value the number will be replaced by the 'Fizz' word. If it's multiple of Buzz value it will replace the number with a 'Buzz' word. If it's multiple of Fizz and Buzz values, it'll be replaced by the word 'FizzBuzz.'.

displayData

displayData takes in one parameter fbArray. The variable fbArray is an array that holds values between 1 and 100 with the Fizz, Fuzz and FizzBuzz words replacing the multiples of those numbers previously provived. We create a variable className that holds the name of a CSS class that we will use to change the color of the Fizz, Fuzz and FizzBuzz strings. We create a variable templateRows that will hold the html we will write to the page.

A for loop is used to check all of the numbers to see if they are even or odd. The remainder operator % is used to see if the number is divisible by two. If it returns zero the number is even. Inside the If statement, the even numbers that passes the check will let the className variable assign the even value as a string. The correct className is injected into the html row for display. Each iteration of the loop adds to the tableBody variable. tableBody variable is a copy of a template used to assemple the table in order to manipulte the way it's presented in the html page.