The Code

                            
                                //display a message to the user
                                function getValues(){
                                    let startValue = 3;
                                    let endValue = 5;
                                    //get values from user
                                    startValue = document.getElementById("startValue").value;
                                    endValue = document.getElementById("endValue").value;
                                    //Convert string inputs to integers if able
                                    startValue = parseInt(startValue);
                                    endValue = parseInt(endValue);
                                    // checkInputs(startValue, endValue); ************ This is an error
                                    if(Number.isInteger(startValue) && Number.isInteger(endValue)){
                                        //generate Numbers Array
                                        let numbers = generateNumbers(startValue, endValue);
                                        //generate Table
                                        displayTable(numbers);
                                    } else{
                                        Swal.fire("Please enter only integers between 1 and 100 (1 , 2, 3 ...)");
                                    }
                                
                                }

                                //generate numbers from startValue to endValue
                                function generateNumbers(sValue, eValue){
                                    //0,1,2,3, etc
                                    let numbers = [];
                                    //Loop over the numbers until we hit the end value
                                    for (let step = 1; step <= 100; step++) {
                                        //Add numbers to array
                                        if(step % sValue == 0 && step % eValue ==0){
                                            numbers.push("FizzBuzz");
                                        } else if(step % sValue == 0){
                                            numbers.push("Fizz");
                                        } else if(step % eValue == 0){
                                            numbers.push("Buzz");
                                        } else {
                                            numbers.push(step);
                                        }
                                        
                                    }
                                    return numbers;
                                }

                                function displayTable(numArr){
                                    //Generate table of values
                                    
                                    let tableBody = document.getElementById("results");

                                    //get the template to make the table
                                    let rowTemplate = document.getElementById("fbTemplate");

                                    //clear tablebody results

                                    tableBody.innerHTML = "";

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

                                        let rowCols = tableRow.querySelectorAll("td");
                                        //This is one table cd <td> the first line adds a class for CSS, the second line adds the text
                                        rowCols[0].classList.add(numArr[i]);
                                        rowCols[0].textContent = numArr[i];
                                        
                                        rowCols[1].classList.add(numArr[i+1]);
                                        rowCols[1].textContent = numArr[i+1];

                                        rowCols[2].classList.add(numArr[i+2]);
                                        rowCols[2].textContent = numArr[i+2];

                                        rowCols[3].classList.add(numArr[i+3]);
                                        rowCols[3].textContent = numArr[i+3];

                                        rowCols[4].classList.add(numArr[i+4]);
                                        rowCols[4].textContent = numArr[i+4];

                                        tableBody.appendChild(tableRow);

                                    }
                                }
                            
                        

The Code is structured in three functions

GetValues

GetValues is the controller function. It pulls the user given values from the UI and converts them to integers, if able. If the values cannot be parsed, an alert pops up to make sure only integer values are entered.

If both values entered are integers, the functions generateNumbers and displayTable are run.

GenerateNumbers

GenerateNumbers is the logic function. It initiates an empty array called "numbers", and uses an if else loop that runs from 0 to 100. It takes in the user values as "Fizz" and "Buzz" values.

The loop checks if each index value is divisible by both the "Fizz" and "Buzz" values, or only the "Fizz" or "Buzz" value. If the value matches one of these conditions, "FizzBuzz", "Fizz", and "Buzz", respectively, is pushed to the array. If the index value isn't divisible by any of these conditions, the index value is pushed to the array.

generateNumbers returns the numbers array.

DisplayTable

DisplayTable is the display function. It takes in the numbers array. It initializes a tableBody variable that stores the information in the tbody tag. The tableBody innerHTML is set as an empty string to clear the previous result.

A for loop looping through the numbers array initializes a number variable that stores the value of each numbers array element. A template is referenced and looped through to create a table with multiple columns.

Each index value has a class name added that matches each index value. The "FizzBuzz", "Fizz", and "Buzz" classes are modified to show bolded text and blue, red and purple classes, respectively.