The Code

              
              function fizzBuzz() {
  let fizz = document.getElementById("fizzNum").value;
  let buzz = document.getElementById("buzzNum").value;

  
  fizz = parseInt(fizz);
  buzz = parseInt(buzz);

  let startValue = document.getElementById("startValue").value;
  let endValue = document.getElementById("endValue").value;


  startValue = parseInt(startValue);
  endValue = parseInt(endValue);

  if (Number.isInteger(fizz) && Number.isInteger(buzz)) {
    let numbersArray = generateNumbers(startValue, endValue);
    displayValues(numbersArray);
  } else {
    Swal.fire({
      backdrop: false,
      title: "Numbers Not Found.",
      text: "Please Enter Numbers",
    });
  }

  if (startValue > endValue) {
    Swal.fire({
      backdrop: false,
      title: "MUST BE: START < END.",
      text: "START must be a lower value than END",
    });

    
  }

  function generateNumbers(start, end) {
    let numbersArray = [];
    for (let i = start; i <= end; i++) {
      numbersArray.push(i);
    }
    return numbersArray;
  }

  function displayValues(numArray) {
    let results = document.getElementById("results");
    results.innerHTML = "";
    for (let index = 0; index < numArray.length; index++) {
      let tagDiv = document.createElement("div");

      tagDiv.innerHTML = numArray[index];

      tagDiv.classList.add("col");

      if (numArray[index] % fizz == 0 && numArray[index] % buzz == 0) {
        tagDiv.classList.add("fizzbuzz");
        tagDiv.innerHTML = "FIZZBUZZ";
      }

      if (numArray[index] % fizz == 0 && numArray[index] % buzz !== 0) {
        tagDiv.classList.add("fizz");
        tagDiv.innerHTML = "FIZZ";
      }

      if (numArray[index] % fizz !== 0 && numArray[index] % buzz == 0) {
        tagDiv.classList.add("buzz");
        tagDiv.innerHTML = "BUZZ";
      }

      if (numArray[index] % fizz !== 0 && numArray[index] % buzz !== 0) {
        if (numArray[index] % 2 == 0) {
          tagDiv.classList.add("resultStyle");
        } else {
          tagDiv.classList.add("resultStyleLight");
        }
      }
      results.appendChild(tagDiv);
    }
  }
}
              
            

How it Works

1. fizzBuzz() is the main function of the application that encompasses all logic in the program
2. First, the program gets user-entered values from the text inputs in the HTML document:
   • Starting Value
   • Ending Value
   • FIZZ
   • BUZZ
3. The application will show the user an error alert if they try to enter any characters other than numbers, if starting value is a larger number than ending value, or if they do not enter any numbers at all.
4. After getting the values from the text inputs, the program then parses the values into integers. FIZZBUZZ requires data to be integers in order to operate.
5. The application then generates an array, incremented by 1, based on the starting value and ending value provided by the user.
6. Once the array is generated, all numbers in the array are processed through a loop. This loop compares each number in the index to a set of conditions:
   • If the number is divisible by the value entered for FIZZ and BUZZ, the number will be replaced with the word "FIZZBUZZ."
   • If the number is divisible by the value entered for FIZZ but not divisible by the value for BUZZ, the number will be replaced with the word "FIZZ."
   • If the number is divisible by the value entered for BUZZ, but not divisible by the value for FIZZ, the number will be replaced with the word "BUZZ."
   • If the number is not divisible by the values for FIZZ or BUZZ, but is an even number, a default CSS style is added
   • If the number is not divisible by the values for FIZZ or BUZZ, but is an odd number, an alternative default CSS style is added
7. After all numbers are processed, the results are displayed to the user by using JavaScript to generate div elements with CSS and Bootstrap classes.