The Code

Entry Point - getValues()

// Get the values from the HTML inputs and store them in a var.
function getValues() {
        // store the values
    let fizzNumber = document.getElementById('fizzNumber').value;
    let buzzNumber = document.getElementById('buzzNumber').value;
    let endNumber = document.getElementById('endNumber').value;

        // change them from a string to a Num
    fizzNumber = Number(fizzNumber);
    buzzNumber = Number(buzzNumber);
    endNumber = Number(endNumber);

        // validate the num is within the defined values else error
    if (isNaN(fizzNumber) || isNaN(buzzNumber) || isNaN(endNumber)) {
            // validate if its a NaN than error for inputting a number
        swal.fire({
        icon:'error',
        title: 'Oops!',
        backdrop: false,
        text: `Please enter numbers only for Fizz Buzz to work properly.`
        });

        // Fizz number is between 0-1000
    } else if (fizzNumber < 0 || fizzNumber > 1000) {
        swal.fire({
        icon:'error',
        title: 'Oops!',
        backdrop: false,
        text: `Please ensure Fizz is between 0-1000 for Fizz Buzz to work properly.`
        });

        // buzz is between 0-1000
    } else if (buzzNumber < 0 || buzzNumber > 1000) {
        swal.fire({
        icon:'error',
        title: 'Oops!',
        backdrop: false,
        text: `Please ensure Buzz is between 0-1000 for Fizz Buzz to work properly.`
        });

        // End Number is between 0-1000
    } else if (endNumber < 0 || endNumber > 1000) {
        swal.fire({
        icon:'error',
        title: 'Oops!',
        backdrop: false,
        text: `Please ensure End Number is between 0-1000 for Fizz Buzz to work properly.`
        });

        // End number is greater than both Fizz and Buzz Numbers
    } else if (endNumber < fizzNumber || endNumber < buzzNumber) {
        swal.fire({
        icon:'error',
        title: 'Oops!',
        backdrop: false,
        text: `Please ensure End Number is greater than the value of Fizz and Buzz number for Fizz Buzz to work properly.`
        });

        // if Fizz is greater than Buzz, but is still valid numebers
    } else {

        let generatedNumbers = generateFizzBuzz(fizzNumber, buzzNumber, endNumber);
        displayFizzBuzz(generatedNumbers);
    }
}
JavaScript

Check for all FizzBuzz - generateFizzBuzz()

function  generateFizzBuzz(fizz, buzz, endNumber) {
  // store the values of the array from 0 to 'endNumber' including keywords
  let numberArray = [];

  // loop counter for generating array
  for (let index = 1; index <= endNumber; index++) {


    if ((index % fizz == 0 && index % buzz == 0)) {

      numberArray.push('FizzBuzz');

    } else if (index % fizz == 0) {

      numberArray.push('Fizz');

    } else if (index % buzz == 0) {

      numberArray.push('Buzz');
    } else {

      numberArray.push(String(index));
    }

  }

  // return out the array of numbers
  return numberArray;
}
JavaScript

Display results as a table- displayFizzBuzz()

function displayFizzBuzz(stringArray) {

  let tableHTML = '';

  for (let index = 0; index < stringArray.length; index++) {

    let value = stringArray[index];

    tableHTML += `${value}`;
  }


  // let Javascript grab the value of a certain html
  let tbody = document.getElementById('results');

  // change that HTML value to include the string of numbers and html we have created.
  tbody.innerHTML = tableHTML;

}
JavaScript

Logic for this app:

getValues()
generateFizzBuzz()
displayFizzBuzz
Bonus:
Error Messages:
sweetAlerts

Entry Point - getValues()

The getValues function is the entry point function that calls all the other functions and adds them to the stack. It also handles validating the inputs before passing them as inputs into the other functions. If the inputs are not valid a Sweet Alert error will display on the UI informing the app user of the failure along with a short description of the exact problem.

Check for all FizzBuzz - generateFizzBuzz()

The generateFizzBuzz function takes the parameters from getValues after the have been checked for validation and will then loop through all the numbers starting at 1 and continue until it reaches the end number the user has chosen. It will then check if the current number in the index is a valid Fizz, Buzz, or FizzBuzz number and add it to a new array. This new array will have the integers and strings we need to build a table that can display the results to the UI. generateFizzBuzz will then return the new array to getValues and that array will be passed to displayFizzBuzz.

Display results as a table- displayFizzBuzz()

The displayFizzBuzz function takes the array from getValues after the generateFizzBuzz function has created the array with the expected output and will turn that array into a table for the user to see on the UI. It will display by changing the HTML on the page effectively inserting the table directly into the HTML.