// CONTROLLER FUNCTION(S)
                            // Get UI values
                            function getValues() {
                                let fizzValue = document.getElementById("fizzValue").value;
                                let buzzValue = document.getElementById("buzzValue").value;
                            
                                // convert to Numbers
                                fizzValue = Number(fizzValue);
                                buzzValue = Number(buzzValue);
                            
                                // call generateNumbers for items list, 0 to 100;
                                let numbers = generateNumbers(0,100);
                            
                                if (validateInput(fizzValue, buzzValue)) {
                                    // call calcFizzBuzz results
                                    let results = calculateFizzBuzz(fizzValue,buzzValue,numbers);
                            
                                    // call displayResults
                                    displayResults(numbers, results);
                                }
                            }
                            
                            
                            // LOGIC FUNCTION(S)
                            // Generate number array
                            function generateNumbers(sValue, eValue) {
                                let numbers = [];
                            
                                for (let index = sValue; index <= eValue; index++) {
                                    numbers.push(index);
                                }
                            
                                return numbers;
                            }
                            
                            // Calc FizzBuzz
                            function calculateFizzBuzz(fValue, bValue, numbersArray) {
                                let results = [];
                                let result = "";
                            
                                for (let index = 0; index < numbersArray.length; index++) {
                                    result = "";
                            
                                    if (numbersArray[index] % fValue == 0) {
                                        result += "Fizz";
                                    }
                            
                                    if (numbersArray[index] % bValue == 0) {
                                        result += "Buzz";
                                    }
                            
                                    results.push(result);
                                }
                            
                                return results;
                            }
                            
                            
                            // Validate input
                            function validateInput(fValue, bValue) {
                                let output = true;
                            
                                if (!Number.isInteger(fValue) || !Number.isInteger(bValue)) {
                                    alert("You must enter integers!")
                                    output = false;
                                }
                            
                                if (fValue < 1 || fValue > 100) {
                                    alert("Enter a Fizz Value from 1 to 100!")
                                    output = false;
                                }
                            
                                if (bValue < 1 || bValue > 100) {
                                    alert("Enter a Buzz Value from 1 to 100!")
                                    output = false;
                                }
                            
                                return output
                            }
                            
                            
                            // VIEW FUNCTION(S)
                            // Display results
                            function displayResults(numbers, results) {
                                // get the table body element from the page
                                let tableBody = document.getElementById("results");
                                // get the template row
                                let templateRow = document.getElementById("fbTemplate");
                                // clear the table first
                                tableBody.innerHTML="";
                            
                                for (let index = 1; index < numbers.length; index++) {  
                                    let num = numbers[index];
                                    let result = results[index];
                                    let tableRow = document.importNode(templateRow.content, true);
                                    let rowCols = tableRow.querySelectorAll("td");
                            
                                    rowCols[0].textContent = num;
                                    rowCols[1].textContent = result;
                                    // can't add an empty string as a class
                                    if (result != "") {
                                        rowCols[1].classList.add(result);
                                    }
                                    
                                    tableBody.appendChild(tableRow);
                                }
                            }
                        
                    

The Code is structured in five functions.

getValues

This function retrieves the user input from the page by utilising getElementById, and then converts the input to the Number type. A list of numbers is generated using the generateNumbers function (default 0 to 100), which allows for future expansion and customisation of the App. The input values are validated with the validateInput function, and if they are valid, the calculateFizzBuzz and displayResults functions are called, which generate the output of the App.

generateNumbers

The purpose of this function is to allow for a custom number range in a future expansion of the App (e.g. 500 to 600, or any user input). The function accepts to parameters: sValue and eValue. A 'for' loop is then used to generate an array of numbers based on the range set by the input parameters. This number array is then returned as the output of the function.

calculateFizzBuzz

calculateFizzBuzz takes in three parameters: fValue, bValue, and numbersArray. A 'for' loop iterates over the length of the input numbers array and performs logic checks, using 'if' statements, on the array values to see if they are multiples of the Fizz or Buzz values (fValue and bValue). Where this is true, a corresponding string is pushed to a separate results array, in with the same index as the numbers array. This way, we can see both the numbers and the FizzBuzz values/multiples simultaneously, without overwriting the numbers when a multiple occurs.

validateInput

The validateInput function takes in two parameters, which are the user input Fizz and Buzz values. The function then uses 'if' statements to determine if the values are not integers, and if they are not values between 1 and 100. If any of these statements are true, then the user is alerted with a corresponding message, and the function returns a boolean false value, to tell the program that the inputs are not validated.

displayResults

displayResults takes in two parameters: numbers and results. The tables where the results are to be inserted and a template structure of the HTML rows are retrieved from the document using getElementById. A 'for' loop iterates over the length of the numbers array, and inserts the values of the numbers array and results array to the table, using the appendChild function. The results (!= "") are also inserted to the class of the results table data using classList.add, where the results are styled using corresponding CSS classes.