The Code

                        
function getValues() {
    // Pulling in user variables, and then calling further functions to process and display fizzbuzz.
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;
    let endValue = document.getElementById("endValue").value;
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);
    endValue = parseInt(endValue);
    if(Number.isInteger(fizzValue) && Number.isInteger(buzzValue) && Number.isInteger(endValue)){
        // User input validation
        let numbers = generateFizzBuzz(fizzValue, buzzValue, endValue);
        displayFizzBuzz(numbers);
    } else {
        alert("You must enter a number.");
    }
}
function generateFizzBuzz(fizz, buzz, end) {
    // Creating the array of the count
    let numbers = [];
    for(i = 1; i <= end; i++){
        if (i % fizz == 0 && i % buzz == 0) {
            // If the number is divisible by both fizz and buzz add Fizzbuzz in its place
            numbers.push("Fizzbuzz");
        } else if (i % fizz == 0) {
            // If the number is divisible fizz add fizz in its place
            numbers.push("Fizz");
        } else if (i % buzz == 0) {
            // If the number is divisible buzz add buzz in its place
            numbers.push("Buzz");
        } else {
            // If it's not divisble by either then just add it to the array
            numbers.push(i);
        }
    }
    // Return the array back to the parent function to be used later
    return numbers;
}
function displayFizzBuzz(numbers) {
    let templateCols = "";
    for(let i=0; i < numbers.length; i++) {
        // We use a ternary operator to choose between adding a custom class if it is fizz, buzz, or fizzbuzz
        Number.isInteger(numbers[i]) ? templateCols += `<div class="col">${numbers[i]},</div>` : templateCols += `<div class="col ${numbers[i].toLowerCase()}">${numbers[i]},</div>`
    }
    document.getElementById("outputData").innerHTML = templateCols;
}
                        
                    

getValues

This acts as the user input validation, and sets up the inputs for use in the rest of the applet. It starts out pulling in data from HTML inputs and assigning them to variables to be passed as parameters to other functions. Once this is done it attempts to convert these strings to intergers. Verifies that it has done so and then calls the generateFizzBuzz function to get started on actually performing the logic for Fizzbuzz. Finally it passes back the array it gets from the generateFizzBuzz function onto the displayFizzBuzz function to construct the HTML that is then displayed for the user.

generateFizzBuzz

This function initializes an empty array then uses basic logic to check each number from 1 to the user's designated end number (100 by default). We start by checking to see if the number i is divisible cleanly by both user defined divisors (3 and 5 by default), and then proceeds to check divisibility for both individually. This is done in this order to ensure that a number is not processed before completion. If it can be cleanly divided into by any or all of these categories then we push the correct word to the array. However if a number cannot be divided evenly by either we push the number to the array.

displayFizzBuzz

Here we build out the HTML to be displayed on the page. We start at the bottom of the array and wrap each array element in a div to be displayed on the page. Depending on the contents of the array we add a class to help further stylize the output of the funtion using CSS. This makes seeing patterns in Fizzbuzz much easier and more visually appealing for the user.