The Code

                    
                        // get the user input from the page
                        // Controller function
                        function getValues() {
                        
                            // get the values from the page
                            let count = document.getElementById('count').value;
                            let fizzValue = document.getElementById('fizzValue').value;
                            let buzzValue = document.getElementById('buzzValue').value;
                            
                            // parse string into ints
                            count = parseInt(count);
                            fizzValue = parseInt(fizzValue);
                            buzzValue = parseInt(buzzValue);
                            
                            // verify inputs are numbers
                            if (isNaN(count) && isNaN(fizzValue) && isNaN(buzzValue)) {
                                // if they are not, tell our user!
                                Swal.fire(
                                    {
                                        icon: 'error',
                                        title: 'Oops!',
                                        text: 'Only whole numbers are allowed for FizzBuzz!'
                                    }
                                );
                            } else if (count > 5000) {
                                // if the count is greater than 5000, tell our user!
                                Swal.fire(
                                    {
                                        icon: 'error',
                                        title: 'Oops!',
                                        text: 'Hey pal, I can\'t count that high!'
                                    }
                                );
                            } else {
                                // if they are numbers, generate numbers
                                let fizzBuzzArray = generateFizzBuzz(count, fizzValue, buzzValue);
                                // then display them on the page
                                displayFizzBuzz(fizzBuzzArray);
                            }
                        }

                        // generate our numbers
                        // Logic function
                        function generateFizzBuzz(end, fizz, buzz) {

                            let tableHTML = '';
                            
                            for (let i = 1; i <= end; i++) {
                                 
                                let value=i; 
                                let className='' ; 
                                
                                if (value % (fizz * buzz) ===0 && value != 0) {
                                     value='FizzBuzz'; 
                                     className = 'fizzBuzz';
                                } else if (value % buzz===0 && value !=0) { 
                                    value='Buzz'; 
                                    className='buzz' 
                                } else if (value % fizz===0 && value !=0) { 
                                    value='Fizz'; 
                                    className='fizz'; 
                                } if (i % 5===0) {
                                    tableHTML +='<tr>';
                                }
                                    
                                let tableRow = `<td class='${className}'>${value}</td>`; 
                                tableHTML += tableRow;
                            
                                if ((i + 1) % 5 === 0) {
                                    tableHTML += '</tr>';
                                }
                            }
                        
                                return tableHTML;
                        }

                        // display them on the page
                        // View function
                        function displayFizzBuzz(arr) {
                            let tableBody = document.getElementById('results');
                            
                            tableBody.innerHTML = arr;

                        }
                    
                

The code is structured in three functions

getValues()

This function is what allows the user to interact with the app. The function waits and listen for the user to click the "Run" button. Once the button is pressed, it takes in the information provided by the user on the App page, and first converts the information to numbers.

After the verification is completed, if the information does not pass the check, or the count value provided is higher than the posted limit, it will prompt the user to enter whole numbers only or a count value less than the posted maximum. If the information does pass the check, it stores it for use in other parts of the program to use.

generateFizzBuzz(end, fizz, buzz)

This function uses the information provided from the getValues() function and generates a range of numbers between the starting and ending value. Then it checks to see if the numbers in the generated range are divisible by the "Fizz" and "Buzz" values provided by the user.

displayFizzBuzz(arr)

This function displays the numbers on the screen and provides "Fizz", "Buzz", and "FizzBuzz" class names to be able to style their own individual backgrounds with CSS to easily distinguish between them.