The Code

                
                  const MAX_VAL_STOP = 5000;
                  const COUNT_START = 1;
                  const COL_PER_ROW = 5;

                  const CLASS_FIZZ = 'fizz';
                  const CLASS_BUZZ = 'buzz';
                  const CLASS_FIZZBUZZ = 'fizzBuzz';
                  const CONTENT_FIZZ = "Fizz";
                  const CONTENT_BUZZ = 'Buzz';
                  const CONTENT_FIZZBUZZ = 'FizzBuzz';

                  let DEF_VAL_FIZZ = 3;
                  let DEF_VAL_BUZZ = 5;
                  let DEF_VAL_STOP = 100;
                
              

Constants and variables used throughout the code, to control and identify reused values more easily.

                
                  function populateTable(idResultsContainer, idFizzInput, idBuzzInput, idStopInput) {
                    let values = getValues(idFizzInput, idBuzzInput, idStopInput);
                  
                    if (isValidInput(values)) {
                      let fizzBuzz = generateFizzBuzz(values);
                      displayFizzBuzz(fizzBuzz, idResultsContainer);
                    }
                  }
                
              

The function called by the app to initiate the table generation process. The arguments it accepts are the IDs for the form fields for Fizz/Buzz/Stop values, as well as the ID for the container in which the game's values will be displayed.

                
                  function getValues(idFizzInput, idBuzzInput, idStopInput) {
                    let values = {
                      fizz: parseInt(document.getElementById(idFizzInput).value),
                      buzz: parseInt(document.getElementById(idBuzzInput).value),
                      stop: parseInt(document.getElementById(idStopInput).value)
                    };
                  
                    return values;
                  }
                
              

Given the IDs of the form fields for Fizz/Buzz/Stop values, this function retrieves the user's inputs in the form fields, attempts to parse them as integers, and consolidates them into a single object.

                
                  function generateFizzBuzz(values) {
                    let fizzBuzz = new Array(values.stop - COUNT_START + 2); //Gonna do a 1-indexed array
                    if (values.fizz == values.buzz) {
                      fillEveryNthCell(fizzBuzz, values.fizz, CONTENT_FIZZBUZZ);
                    } else {
                      fillEveryNthCell(fizzBuzz, values.fizz * values.buzz, CONTENT_FIZZBUZZ);
                      fillEveryNthCell(fizzBuzz, values.fizz, CONTENT_FIZZ);
                      fillEveryNthCell(fizzBuzz, values.buzz, CONTENT_BUZZ);
                    }
                  
                    for (let i = 1; i < fizzBuzz.length; i++) {
                      if (!fizzBuzz[i]) fizzBuzz[i] = '' + i;
                    }
                    
                    return fizzBuzz;
                  }
                
              

This function takes the user's inputs as arguments, and turns them into an array of the values resulting from the game of FizzBuzz represented by said values.

                
                  function displayFizzBuzz(fizzBuzz, idResultsContainer) {
                    let html = fizzBuzzToHTML(fizzBuzz);
                    let resultsContainer = document.getElementById(idResultsContainer);
                    resultsContainer.innerHTML = html;
                  }
                
              

This function receives an array of the values resulting from a game of FizzBuzz, creates the HTML representing a table- or spreadsheet-like structure containing the values, and places them into the container designated by the app.

                
                  function isValidInput(values) {
                    let isValid = true;
                  
                    if (!Number.isInteger(values.fizz) || values.fizz < COUNT_START) {
                      isValid = false;
                      Swal.fire({
                        icon: 'error',
                        title: 'Invalid Fizz Value',
                        text: `Please change Fizz Value to an integer between ${COUNT_START} and ${MAX_VAL_STOP}.`,
                      });
                    } else if (!Number.isInteger(values.buzz) || values.buzz < COUNT_START) {
                      isValid = false;
                      Swal.fire({
                        icon: 'error',
                        title: 'Invalid Buzz Value',
                        text: `Please change Buzz Value to an integer between ${COUNT_START} and ${MAX_VAL_STOP}.`,
                      });
                    } else if (!Number.isInteger(values.stop) || values.stop < COUNT_START || values.stop > MAX_VAL_STOP) {
                      isValid = false;
                      Swal.fire({
                        icon: 'error',
                        title: 'Invalid Stop Value',
                        text: `Please change Stop Value to an integer between ${COUNT_START} and ${MAX_VAL_STOP}.`,
                      });
                    }
                  
                    return isValid;
                  }
                
              

This function is used immediately after receiving and parsing the user input. If there are any issues with the user's input, the game is prevented from playing out, and a SweetAlert message is displayed instructing the user to correct their input.

                
                  function fillEveryNthCell(arr, n, className) {
                    for (let i = n; i < arr.length; i += n) {
                      if (!arr[i]) arr[i] = className;
                    }
                  }                
                
              

This function helps create the array of values resulting from a game of FizzBuzz. Specifically, it takes one of Fizz/Buzz/FizzBuzz and inserts it in every part of the array it belongs at.

                
                  function fizzBuzzToHTML(fizzBuzz) {
                    let html = '';
                  
                    for (let i = 1; i < fizzBuzz.length; i++) {
                      if (fizzBuzz[i] == CONTENT_FIZZBUZZ) {
                        html += `<div class="col ${CLASS_FIZZBUZZ}">${fizzBuzz[i]}</div>`;
                      } else if (fizzBuzz[i] == CONTENT_FIZZ) {
                        html += `<div class="col ${CLASS_FIZZ}">${fizzBuzz[i]}</div>`;
                      } else if (fizzBuzz[i] == CONTENT_BUZZ) {
                        html += `<div class="col ${CLASS_BUZZ}">${fizzBuzz[i]}</div>`;
                      } else {
                        html += `<div class="col">${fizzBuzz[i]}</div>`;
                      }
                    }
                  
                    return html;
                  }
                
              

This helper function takes an array of the values resulting from a game of FizzBuzz, and converts them into a string of HTML representing a table- or spreadsheet-like structure containing those values.