The Code

          
            //Getting the numebrs from the page, validate the niputs we collected, then pas the vales t the pther fucntions
const getValues = () => {
  let fizzVal = document.getElementById('fizz-value').value;
  let buzzVal = document.getElementById('buzz-value').value;
  let stopVal = document.getElementById('stop-value').value;

  let convertFizzValToNum = Number(fizzVal);
  let convertBuzzValToNum = Number(buzzVal);
  let convertStopValToNum = Number(stopVal);

  //if
  if (convertFizzValToNum != 3 || convertBuzzValToNum != 5 ||
    isNaN(convertFizzValToNum) || isNaN(convertBuzzValToNum)) {

    Swal.fire({
      title: 'Oops!',
      text: 'Fizz can only be 3. Buzz can only be 5. Try your inputs again.',
      icon: 'error',
      backdrop: false
    });
  }
  else if (convertStopValToNum > 5000) {
    Swal.fire({
      title: 'Oops!',
      text: 'The stop value cannot be greater than 5000',
      icon: 'error',
      backdrop: false
    });
  }
  else if (convertFizzValToNum < 1) {
    Swal.fire({
      title: 'Oops!',
      text: 'The fizz value cannot be less than 1',
      icon: 'error',
      backdrop: false
    });
  }



  let passFizzBuzzCollection = generateFizzBuzz(convertFizzValToNum, convertBuzzValToNum, convertStopValToNum);

  displayFizzBuzz(passFizzBuzzCollection, convertStopValToNum);


}

//create an array of values accordng to FizBuzz rules e.g. [1,2,'Fizz', 4, 'Buzz']

const generateFizzBuzz = (convertFizzValToNum, convertBuzzValToNum, convertStopValToNum) => {
  let fizzBuzzNumbers = [];

  for (let i = 1; i <= convertStopValToNum; i++) {

    if (i % convertFizzValToNum === 0 && i % convertBuzzValToNum === 0) {
      fizzBuzzNumbers.push("FizzBuzz")
    } else if (i % convertBuzzValToNum === 0) {
      fizzBuzzNumbers.push("Buzz")
    }
    else if (i % convertFizzValToNum === 0) {
      fizzBuzzNumbers.push("Fizz")
    }
    else {
      fizzBuzzNumbers.push(i)
    }
  }

  return fizzBuzzNumbers;

}

//Takwe in an array of vlaues, and siaply them on the page
const displayFizzBuzz = (passFizzBuzzCollection) => {
  let tableHtml = '';

  for (let i = 0; i < passFizzBuzzCollection.length; i++) {
    let currentNumber = passFizzBuzzCollection[i];
    let className = '';
    //could also make classes for fizzbuzz uppercase and apply directly from the array 
    //since the array holds fizz buzz
    if (currentNumber === "Fizz") {
      className = "fizz text-light";
    }
    else if (currentNumber === "Buzz") {
      className = "buzz text-light";
    }
    else if (currentNumber === "FizzBuzz") {
      className = "fizzbuzz text-light";
    }
    else {
      className = ""
    }
    let htmlCol = `<div class="col ${className} border border-2">  ${currentNumber} </div>`
  
    tableHtml += htmlCol;
  }

  document.getElementById("results").innerHTML = tableHtml

}

const clearDisplay = () => {
  document.getElementById("results").innerHTML = " ";
}
          
        

The code is structured in four functions

getValues()

getValues() Grabs the user input and validates the input to make sure the input values are valid. Validation checks to make sure all values are positive numbers, the stop value should never be greater than 5000 and that fizz value is 3 and buzz value is 5. If any input value is invalid, a SweetAlert message will be shown. If the validation passes, the input values are passed to the function generateFizzBuzz()

generateNumbers()

generateNumbers() Uses the user input passed from getValues() and uses a for loop to iterate over the range from 0 to the stopValue. The loops iterates, it will check to see which numbers are a multiple of 3 & 5, multiple of 3 only, multiple of 5 only and these numbers will be stored in a array. This array will be returned to getValues() and passed on to displayFizzBuzz()

displayFizzBuzz()

This function uses the passFizzBuzzCollection array passed from generateFizzBuzz() and uses a for loop to iterate over the values to apply classes with different background colors for each number in the array to emphasize whether the number is a Fizz, Buzz, or Fizzbuzz number. After all the loop finishes, each value will be insert into template literal that contains a a table row, with table data holding the number from the getValues() and passed on to the function displayFizzBuzz()

clearTable

Used this function is used to clear the table data.