The Code

                    
                        // Get the numbers from our form inputs & passing values to other functions
                        // ENTRY POINT
                        // Controller Function
                        function getValues() {
                        
                            let fizzNumber = document.getElementById('startValue').value;
                            let buzzNumber = document.getElementById('endValue').value;
                            let stopNumber = document.getElementById('stopValue').value;
                        
                            fizzNumber = Number(fizzNumber);
                            buzzNumber = Number(buzzNumber);
                            stopNumber = Number(stopNumber);
                        
                            //Validating inputs from page
                            if (isNaN(fizzNumber) == true || isNaN(buzzNumber) == true || isNaN(stopNumber) == true) {
                        
                                Swal.fire({
                                    title: 'Oops!',
                                    text: 'FizzBuzz only works with real numbers.',
                                    icon: 'error',
                                    backdrop: false
                                });
                        
                        
                            } else {
                        
                                let fbArray = generateFizzBuzz(fizzNumber, buzzNumber, stopNumber);
                        
                                displayFizzBuzz(fbArray);
                            }
                        
                        
                        
                        
                        }
                        
                        // Busniess Logic - Creates an array of values according to the fizzbuzz rules
                        // Data Model
                        function generateFizzBuzz(fizzValue, buzzValue, max) {
                        
                            //Check every number from 1 to "max"
                            //for each number, check if it is divisible by fizzValue
                            //check if it is divisible by buzzValue
                            //check if it is divisible by both
                            //then put the right value into the array
                            //then return that array
                        
                            let fbArray = [];
                        
                        
                            for (let number = 1; number <= max; number = number + 1) {
                                
                                if (number % fizzValue == 0 && number % buzzValue == 0) {
                        
                                    fbArray.push('FizzBuzz');
                        
                                } else if (number % buzzValue == 0) {
                        
                                    fbArray.push('Buzz');
                        
                                } else if (number % fizzValue == 0) {
                        
                                    fbArray.push('Fizz');
                                
                                } else {
                        
                                    fbArray.push(number);
                                }        
                        
                            }
                        
                            return fbArray;
                        
                        
                        }
                        
                        // Puts the numbers on the page
                        // View Function
                        function displayFizzBuzz(fbArray) {
                        
                            let tableHtml = ''; // 12
                        
                            for (let i = 0; i < fbArray.length; i = i + 1) {
                                
                                let value = fbArray[i];
                        
                                let html = 
${value}
;
                        
                                tableHtml = tableHtml + html;
                            }
                        
                            let tableOnThePage = document.getElementById('results');
                            
                            tableOnThePage.innerHTML = tableHtml;
                        }
                    
                

Code Explained

The code for FizzBuzz is structured in three functions:

The getValues function retrieves the numbers from the field on the page as a start, end and stop number. Then, the code checks to see if those values are in fact real numbers. If the values are not numerical, an error message will appear and the code will cease to run.

The generateFizzBuzz function then creates an array to put numbers inside of. Looping over each number provided by the user, the function checks to see if each number is divisible by the Fizz Value, the Buzz Value, or divisible by both values. This will determine if the app shows Fizz, Buzz or FizzBuzz on the table that is being created to display. Then, the array of values is sent to the next function so that it can be displayed properly.

The displayFizzBuzz function takes each number or value and adds them to an index to display on the page. The JavaScript then uses HTML to display the table on the page in a list format.