The Code

                    
                        function getValues() {
                            let fizzValue = document.getElementById('fizzValue').value;
                            let buzzValue = document.getElementById('buzzValue').value;
                            let stopValue = document.getElementById('stopValue').value;
                        
                            fizzValue = parseInt(fizzValue);
                            buzzValue = parseInt(buzzValue);
                            stopValue = parseInt(stopValue);
                        
                            if (isNaN(fizzValue) && isNaN(buzzValue) && isNaN(stopValue)) {
                        
                                Swal.fire(
                                    {
                                        icon: 'error',
                                        title: 'Uh oh!',
                                        text: 'Please enter a valid number for both the start and end values.',
                                        backdrop: false
                                    }
                                );
                            } else if (stopValue > 5000) {
                        
                                Swal.fire(
                                    {
                                        icon: 'error',
                                        title: 'Uh oh!',
                                        text: 'Please enter a valid number for both the start and end values.',
                                        backdrop: false
                                    }
                                );
                            } else {
                                let fizzBuzzArray = generateFizzBuzz(fizzValue, buzzValue, stopValue);
                        
                                displayFizzBuzz(fizzBuzzArray);
                            }
                        }
                        
                        function generateFizzBuzz(fizzValue, buzzValue, stopValue) {
                            let generatedValues = [];
                        
                            for (let number = 1; number <= stopValue; number++) {
                                let value = '';
                        
                                if (number % fizzValue == 0 && number % buzzValue == 0) {
                                    generatedValues.push('FizzBuzz');
                                } else if (number % fizzValue == 0) {
                                    generatedValues.push('Fizz');;
                                } else if (number % buzzValue == 0) {
                                    generatedValues.push('Buzz');
                                } else {
                                    generatedValues.push(number);;
                                }
                        
                            }
                        
                            return generatedValues;
                        }
                        
                        function displayFizzBuzz(generatedValues) {
                            let resultsTable = document.getElementById('result');
                        
                            let resultHtml = '';
                        
                            // for each number in values:
                            for (let i = 0; i < generatedValues.length; i++) {
                                let value = generatedValues[i];
                        
                                if (i % 5 == 0) {
                                    resultHtml += '<tr>';
                                }
                        
                                let htmlForValue = `<td class="${value}">${value}</td>`;
                                resultHtml += htmlForValue;
                        
                                if ((i + 1) % 5 === 0) {
                                    resultHtml += '</tr>';
                                }
                            }
                        
                            resultsTable.innerHTML = resultHtml;
                        }
                        
                    >
                

The code is structured in 3 functions

getValues()

The getValues function in JavaScript gathers input values for "Fizz," "Buzz," and "Stop" converting them into numbers. It checks if all the values are valid numbers; if not, it displays an error message. Additionally, it ensures that the "Stop" value is not greater than 5000, showing the same error if the condition is not met. When the input validation is successful, the function calls another function, generateFizzBuzz, to create an array of FizzBuzz numbers based on the provided inputs. It uses the displayFizzBuzz function to show the generated numbers.

generateFizzBuzz()

The generateFizzBuzz function in JavaScript produces a sequence of values based on given parameters: fizzValue, buzzValue, and stopValue. It initializes an empty array called generatedValues. Using a loop that counts from 1 to the specified stopValue, it examines each number. Depending on whether the number is divisible by both fizzValue and buzzValue, only fizzValue, only buzzValue, or neither, it adds the corresponding label ('FizzBuzz', 'Fizz', 'Buzz', or the number itself) to the generatedValues array. The function then returns this array containing the FizzBuzz sequence up to the specified stopValue.

displayFizzBuzz()

The displayFizzBuzz function in JavaScript takes an array of generated values and displays them in a table. It finds an HTML element with the ID 'result' to show the table. The function creates HTML code for each value in the array and adds it to the table. For every fifth value, it starts a new row in the table. After processing all values, the updated HTML is set as the content of the 'result' element, displaying the FizzBuzz sequence in a neat table format. In simpler terms, this function arranges the FizzBuzz values in rows and columns and shows them on the webpage.