The Code

                    
                        // CONTROLLER FUNCTION -get inputs and displays generated values on page!
                        function getValues() {
                        
                            // get values from doc
                            let fizzValue = document.getElementById("fizzValue").value;
                            let buzzValue = document.getElementById("buzzValue").value;
                        
                            // convert to numbers
                            fizzValue= Number(fizzValue);
                            buzzValue = Number(buzzValue);
                        
                            // input validation
                            if (isNaN(fizzValue) == true || isNaN(buzzValue) == true) {
                                // make sure user inputs real number
                                Swal.fire({
                                    title: "Oops!",
                                    text: "Type in a number, not text",
                                    icon: "error",
                                    backdrop: false
                                })
                            } else {
                                // display numbers if all is ok
                                let array = generateFizzBuzz(fizzValue, buzzValue);
                        
                                displayFizzBuzz(array);
                            }
                        }
                        
                        // LOGIC FUNCTION
                        function generateFizzBuzz(fizzValue, buzzValue) {
                        
                            // initialize array
                        
                            let array = [];
                        
                            // For-Loop 1-100
                        
                            for (let i = 1; i <= 100; i++) {
                                // boolean modulo check & push to array
                                if (i % fizzValue == 0 && i % buzzValue == 0) {
                                    array.push("FizzBuzz");
                                } else if (i % fizzValue == 0) {
                                    array.push("Fizz");
                                } else if (i % buzzValue == 0) {
                                    array.push("Buzz");
                                } else {
                                    array.push(i);
                                }
                            }
                            return array;
                        }
                        
                        
                        // VIEW FUNCTION- connects to html doc
                        function displayFizzBuzz(array) {
                        
                            let tableHtml = "";
                        
                            // loop array, table row for each result
                            for (let index = 0; index < array.length; index++) {
                        
                                let currentNumber = array[index];
                        
                                let name = "";
                            
                                let tableRowHtml = `${currentNumber}`;
                        
                                tableHtml = tableHtml + tableRowHtml;
                            }
                            // add rows to table
                            document.getElementById("results").innerHTML = tableHtml;
                        
                        
                        }
                        
                    
                
Walkthrough
  • Retrieve values from doc and convert string numbers to real numbers
  • Configure a Sweet Alert, to display error message if input is unaccepted
  • Create an array; check for FizzBuzz through if/then statements and modulo
  • Find the index of the array and display the value at each index point
  • Create a table, and interpolate FizzBuzz data into our table