The Code

                    
                        // Gets the numbers from the value input fields
                        function getValues() {
                            // get the values from form, convert strings to number, and drop decimals
                            let fizz = parseInt(document.getElementById('fizz-value').value);
                            let buzz = parseInt(document.getElementById('buzz-value').value);
                            let start = parseInt(document.getElementById('start-value').value);
                            let end = parseInt(document.getElementById('end-value').value);

                            // validation
                            if (Number.isInteger(fizz)
                                && Number.isInteger(buzz)
                                && Number.isInteger(start)
                                && Number.isInteger(end)
                                && start > 0
                                && end > 0
                                && end <= 3000
                                && start <= end) {
                                let numbersToDisplay = FizzB(fizz, buzz, start, end);

                                displayNumbers(numbersToDisplay);
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: 'Sorry, but there\'s a problem with your inputs. \'Fizz, B\' only works with real numbers, start and end values greater than 0, a max end value of 3,000, and a start value that isn\'t greater than the end value',
                                    icon: 'error',
                                    backdrop: false
                                });
                            }
                        }

                        function FizzB(fizz, buzz, start, end, result = []) {
                            // classic method
                            // let value = ''
                            // if (start % fizz == 0) value +='fizz';
                            // if (start % buzz == 0) value +='buzz';
                            // if (value == '') value += start;

                            // ternary one-line method
                            let value = (start % fizz == 0 ? 'fizz' : '') + (start % buzz == 0 ? 'buzz' : '') || start;

                            result.push(value);
                            start++;
                            if (start > end) return result;
                            else return FizzB(fizz, buzz, start, end, result);
                        }

                        function displayNumbers(numbersToDisplay) {
                            let tableHtml = '';

                            for (let i = 0; i < numbersToDisplay.length; i++) {
                                tableHtml += `
${numbersToDisplay[i]}
`; } document.getElementById('results').innerHTML = tableHtml; }

'Fizz, B' is structured in three functions.

getValues

This function gets the values passed from the website form as strings, which it then attempts to integers (i.e, numbers without decimals). From there, it validates whether the values are valid for running the other two functions. The checks are as follows:

  • Were numbers passed? Although the form is set to only allow numbers, some browsers may not respect that limitation, resulting in the user providing values that aren't numbers.
  • Are the start and end values greater than 0? This applet requires start and end values greater than 0 to function properly.
  • Is the stop value greater than 3,000? Because browsers can only handle so much calculation at once, I set the stop value to 3,000 to provide a limit while giving a wide range of choice for the user.
  • Is the start value greater than the end value? This applet requires a start value that is equal to or less than the end value to function properly.

Once these checks have been performed, the function then calls FizzB(), passing it the values from the form receiving back an array. The function then calls displayNumbers(), passing said array.

FizzB

This function is recursive, receiving the values from the form and a default parameter of a blank array known as 'result'. A classic method of solving 'FizzBuzz' is provided in comments, but the function as written uses a ternary, one-line method of solving 'FizzBuzz'.

This ternary method checks whether 'start' is divisible by the fizz or buzz values. If so, the respective word is assigned to the variable 'value'; this additionally means that if 'start' is divisible by both fizz and buzz, it will apply both. If 'start' is divisible by neither, then 'value' is set to start' instead.

Once value has been set, it is pushed into the 'result' array, and start is incremented up. If 'start' is now greater than 'end', the function will return the 'result' array. Otherwise, it will recursively call itself, passing the form values, the incremented 'start', and the in-progress 'result' array.

displayNumbers

The final function of the applet, this function's purpose is to render the array into html to be displayed on the applet page while specially formatting select numbers in the array. It receives only numbersToDisplay as an argument.

The function begins by declaring tableHtml as a blank string variable, then it enters a for-loop that will build the string of HTML code to be displayed on the applet page. This loop uses only one line, which cycles through each value inside numbersToDisplay, adding it to the end of tablHtml as part of a template literal HTML string. The value is added both within the HTML tags as well as a class for the tag, which will result in a stylized appearance on the applet page if the value is fizz, buzz, or fizzbuzz.

Once tableHtml has been fully built up using every value from numbersToDisplay, the function uses DOM manipulation to change the HTML on the applet page to match tableHtml, resulting in all values being displayed on the page in a row of responsive columns.