The Code

                
                    function getValues() {
                        //get values from the page
                        let fizzValue = document.getElementById('fizzValue').value;
                        let buzzValue = document.getElementById('buzzValue').value;
                        let endValue = document.getElementById('stopValue').value;
                    
                        //parse the input (string) into numbers
                        fizzValue = parseInt(fizzValue);
                        buzzValue = parseInt(buzzValue);
                        endValue = parseInt(endValue);
                    
                        // verify that inputs are numbers
                        if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue) && Number.isInteger(endValue)) {
                            //IF YES -  generate numbers 
                            let numbersArray = generateNumbers(fizzValue, buzzValue, endValue);
                            //& display on page
                            displayNumbers(numbersArray);
                        } if (endValue > 5000){
                            //IF NO - tell user they goofed
                            Swal.fire(
                                {
                                    icon: 'error',
                                    title: 'You goofed it...',
                                    text: 'That number is waaaay too high! Please enter a value below 5000 for the stop value.',
                                }
                            );
                        // } else {
                        //     //IF NO - tell user they goofed, numbers only 
                        //     Swal.fire(
                        //         {
                        //             icon: 'error',
                        //             title: 'You goofed it...',
                        //             text: 'Only integers are allowed for this input.',
                        //         }
                        //     );
                        // } 
                        
                    
                    }
                    
                    //generate the numbers within the specified value, stopping at the stop value
                    function generateNumbers(fizzValue, buzzValue, endValue) {
                        let numbers = [];
                        let end = endValue;
                    
                        for (let value = 1; value <= end; value++) {
                            let newValue = value;
                    
                            if (value % fizzValue == 0) {
                                newValue = 'Fizz'
                            }
                            
                            if (value % buzzValue == 0) {
                                newValue = 'Buzz'
                            }
                            
                            if (value % buzzValue == 0 && value % fizzValue == 0) {
                                newValue = 'FizzBuzz'
                            }
                    
                            numbers.push(newValue);
                        }
                        return numbers;
                    
                    }
                    
                    //Turns the table appearance into fizz, buzz and fizz buzz
                    function displayNumbers(numbersArray) {
                        let tableBody = document.getElementById('results');
                    
                        let tableHtml = "";
                    
                        for (let index = 0; index < numbersArray.length; index++) {
                            let value = numbersArray[index];
                            let className = '';
                            if (value == 'Fizz') {
                                className = 'fizz';
                            }
                    
                            if (value == 'Buzz') {
                                className = 'buzz';
                            }
                    
                            if (value == 'FizzBuzz') {
                                className = 'fizzbuzz';
                            }
                    
                            let tableRow = `${value}`;
                    
                            tableHtml = tableHtml + tableRow;
                    
                            if ((index + 1) % 5 == 0) {
                                tableHtml += '';
                            }
                        }
                    
                        tableBody.innerHTML = tableHtml;
                            }}
                
            

The code is structured into three functions.

getValues()

This function is ther over arching function which contains all of the code. We start by getting the input values and parsing them into integers. This beginning part of the code also checks to ensure that the values are in fact numbers, giving the user an error if they accidentally entered something other than a numerical value.

generateNumbers()

This function generates what numbers fall under the corresponding fizz, buzz or fizzbuzz values. It also ensures that the code will stop at the given stop value.

displayNumbers()

This last function determines how the values we've calculated will appear on the table. It checks each of the above values to see if they are Fizz, Buzz or FizzBuzz so that it can assign each of them a corresponding class name. This is so that they will appear differently than other values on the table.