The Code for FIZZ BUZZ

getValues()

getValues is a controller function that gets the user's fizz and buzz values from the page so that they can be displayed as multiples for the numbers 1 to 100. It parses the fizz and buzz values as integers and then passes them along with an array of numbers 1 to 100 to a display function where they are all printed to the screen. 

//get the values from the Page
//starts or controller function
function getValues() {
    //get values from the page
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;

    //Need to validate input
    //parse into integers
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);

    if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
        //call generateNumbers
        let numbers = generateNumbers();

        //call displayNumbers
        displayNumbers(fizzValue, buzzValue, numbers);
    } else {
        alert("You must enter integers");
    }

}

generateNumbers()

generateNumbers is a logic function that generates and transfers numbers 1 to 100 into an array using a for loop, and then returns the number array to the calling function. 

//logic function
function generateNumbers() {
    let numbers = [];

    //get all numbers from start to end

    for (let index = 1; index <= 100; index++) {
        //execute in a loop until index = eValue
        numbers.push(index);
    }

    return numbers;
}

displayNumbers(fValue, bValue, numbers)

displayNumbers is a display function that displays fizz and buzz values for the numbers 1 to 100 on to the page. Both the fizz and buzz values are passed into the function along with the number array. These values are processed using a for loop and if-then-else conditional statements. They are templated on to the page using different colors to maximize user readability. 

//display or view functions
function displayNumbers(fValue, bValue, numbers) {
    let templateRows = "";

    for (let index = 0; index < numbers.length; index++) {
        let className = "";
        let number = numbers[index];

        if (index % 5 == 0) {
            templateRows += ``;
        }

        if (number % fValue == 0 && number % bValue == 0) {
            className = "fizzBuzz";
            templateRows += `${className}`;
        }
        else if (number % fValue == 0) {
            className = "fizz";
            templateRows += `${className}`;
        }
        else if (number % bValue == 0){
            className = "buzz";
            templateRows += `${className}`;
        }
        else {
            templateRows += `${number}`;
        }

        if ((index + 1) % 5 == 0) {
            templateRows += ``;
        }
    }

    document.getElementById("results").innerHTML = templateRows;

}