The Code

                    
            
                        function getValues() {
                        
                            let fizz = document.getElementById('Fizz').value;
                            let buzz = document.getElementById('Buzz').value;
                            let length = document.getElementById('Length').value;
                        
                            length = Number(length)
                            fizz = Number(fizz);
                            buzz = Number(buzz);
                            let range = generateFizzBuzz(fizz, buzz, length);
                            displayFizzBuzz(range);
                        }
                      
                        function generateFizzBuzz(fizz, buzz, numlist) {
                            let range = [];
                            if (numlist > 100) {
                                Swal.fire(
                                    {
                                        backdrop: false,
                                        title: 'Error',
                                        icon: 'error',
                                        text: "Length must be 100 or under"
                                    }
                                );
                            } else if (isNaN(numlist) == true) {
                                Swal.fire(
                                    {
                                        backdrop: false,
                                        title: 'Error',
                                        icon: 'error',
                                        text: "All values must be numbers"
                                    }
                                );
                            } else if (isNaN(fizz) == true || isNaN(buzz) == true) {
                                Swal.fire(
                                    {
                                        backdrop: false,
                                        title: 'Error',
                                        icon: 'error',
                                        text: "All values must be numbers"
                                    }
                                );
                            } else {
                                for (let index = 1; index < numlist; index++) {
                                    if (index % fizz == 0 && index % buzz == 0) {
                                        range.push("fizzbuzz");
                                    }
                                    else if (index % fizz == 0) {
                                        range.push("fizz");
                                    } else if (index % buzz == 0) {
                                        range.push("buzz");
                                    } else {
                                        range.push(index);
                                    }
                                }
                                return range;
                            }
                        }
                        
                        

                        function displayFizzBuzz(range) {
                            let tableHTML = "";
                        
                            for (let index = 0; index < range.length; index++) {
                                tableHTML += `<tr><td class="${range[index]}">${range[index]}</tr></td>`;
                            }
                        
                            document.getElementById('results').innerHTML = tableHTML;
                        }

                    
                

The program creates a FizzBuzz sequence based on user import and displays it on a webpage with different styles for each number.

The getValues function is the entry point for the program and serves as the controller. It first retrieves the values of three elements from the HTML page with IDs 'Fizz', 'Buzz', and 'Length', representing the Fizz number, Buzz number, and the desired length of the FizzBuzz sequence, respectively. It then converts these values to numbers using the Number() function. If any of the values is not a valid number (e.g., if the user enters non-numeric characters), it displays an error message using the Swal library (SweetAlert), which shows a pop-up alert with the error message. If all values are valid numbers, it calls the generateFizzBuzz() function.

The generateFizzBuzz function takes the numlist parameter (which represents the desired length of the FizzBuzz sequence) and generates the sequence from 1 to numlist. However, if numlist is greater than 100, it shows an error message using Swal, indicating that the length must be 100 or under.

The displayFizzBuzz function takes three parameters: range (the generated FizzBuzz sequence), fizz (the Fizz number), and buzz (the Buzz number). It then loops through each number in the range array and generates the corresponding table row for the HTML table. If the number is divisible by both fizz and buzz, it creates a table row with the class "both" and the content "FizzBuzz". If the number is only divisible by fizz, it creates a table row with the class "fizz" and the content "Fizz". If the number is only divisible by buzz, it creates a table row with the class "buzz" and the content "Buzz". If the number is not divisible by either fizz or buzz, it creates a regular table row with the number itself as the content. After processing all numbers in the range, the function sets the inner HTML of an element with the ID 'results' to the generated tableHTML, effectively displaying the FizzBuzz sequence on the webpage.