// get Fizz and Buzz values from the user, the defaults are 3 and 5
// Controller function
function getValues() {
  // get user values from the page
  let fizzValue = document.getElementById("fizzValue").value;
  let buzzValue = document.getElementById("buzzValue").value;

  // parse for numbers
  fizzValue = parseInt(fizzValue);
  buzzValue = parseInt(buzzValue);

  // check that the numbers are integers
  if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {

    // determine FizzBuzz values
    let fbArray = fizzBuzz(fizzValue, buzzValue);

    // show the values on the webpage
    displayData(fbArray);

  } else {
    alert("You must enter integer numbers!");
  }
}

// do FizzBuzz calculations - version #1 If/Else
// Logic function
function fizzBuzz(fizzValue, buzzValue) {
  let returnArray = [];

  for (let i = 1; i <= 100; i++) {
    // check each value in three steps
    if (i % fizzValue == 0 && i % buzzValue == 0) {
      returnArray.push("FizzBuzz");
    }
    else if (i % fizzValue == 0) {
      returnArray.push("Fizz");
    }
    else if (i % buzzValue == 0) {
      returnArray.push("Buzz");
    }
    else {
      returnArray.push(i);
    }
  }

  return returnArray;
}

// fizzBuzz version #2 using Switch Statement
function fizzBuzz2(fizzValue, buzzValue) {
  let returnArray = [];
  let Fizz = false;
  let Buzz = false;

  for (let i = 1; i <= 100; i++) {
    Fizz = i % fizzValue == 0;
    Buzz = i % buzzValue == 0;

    switch (true) {
      case Fizz && Buzz: {
        returnArray.push("FizzBuzz");
        break;
      }
      case Fizz: {
        returnArray.push("Fizz");
        break;
      }
      case Buzz: {
        returnArray.push("Buzz");
        break;
      }
      default: {
        returnArray.push(i);
        break;
      }
    }
  }

  return returnArray;
}

// fizzbuzz version #3 using Ternary Operator
function fizzBuzz3(fizzValue, buzzValue) {
  let returnArray = [];

  for (let i = 1; i <= 100; i++) {
    let value = (i % fizzValue == 0 ? "Fizz" : "") +
                (i % buzzValue == 0 ? "Buzz" : "") || i;

    returnArray.push(value);
  }

  return returnArray;
}

// loop over the FizzBuzz array and display 5 values per row
// View function
function displayData(fbArray) {
  // get the table body element from the page
  let tableBody = document.getElementById("results");

  // get the template row
  let templateRow = document.getElementById("fbTemplate");

  // clear the table first, just in case
  tableBody.innerHTML = "";

  for (let i = 0; i < fbArray.length; i += 5) {
    let tableRow = document.importNode(templateRow.content, true);

    // grab just the <td>'s and put them into an array
    let rowCols = tableRow.querySelectorAll("td");

    // add value to each column, and assign a class to style it
    rowCols[0].classList.add(fbArray[i]);
    rowCols[0].textContent = fbArray[i];

    rowCols[1].classList.add(fbArray[i + 1]);
    rowCols[1].textContent = fbArray[i + 1];

    rowCols[2].classList.add(fbArray[i + 2]);
    rowCols[2].textContent = fbArray[i + 2];

    rowCols[3].classList.add(fbArray[i + 3]);
    rowCols[3].textContent = fbArray[i + 3];

    rowCols[4].classList.add(fbArray[i + 4]);
    rowCols[4].textContent = fbArray[i + 4];

    // add the row to the table
    tableBody.appendChild(tableRow);
  }
}

The Code is structured in three functions.

1) getValues function

Function getValues is the Controller function. It is triggered by an onClick event connected to a button on the App page. It then collects Fizz and Buzz Values from the input fields on the page, and routes requests to other functions.

It validates the input, converting the values to integers. If entered values are valid integer numbers it will call the fizzBuzz function to calculate Fizz Buzz, and then the displayData function. Otherwise it will show an alert to enter only integer values.

2.1) fizzBuzz function - If/Else version

Function fizzBuzz is the Logic function. This first version uses IF/Else statements.

It accepts Fizz and Buzz Value arguments. For each number from 1 to 100 it performs checks in 3 steps using If/Else statements, assigning apropriate value to returnArray.

The value is: Fizz, Buzz or FizzBuzz - if the number is divisible by fizzValue, buzzValue or both at the same time. Otherwise, if not divisible by any of these, it assigns the number to the returnArray.

After looping through all the 100 numbers, it returns the final Fizz Buzz returnArray.

2.2) fizzBuzz2 function - Switch version

Function fizzBuzz is the Logic function. This second version uses Switch statement.

It accepts Fizz and Buzz Value arguments. For each number from 1 to 100 it performs the same checks as the first version, but using the Switch statement syntax.

After looping through all the 100 numbers, it returns the final Fizz Buzz returnArray

2.3) fizzBuzz3 function - Ternary Operator version

Function fizzBuzz is the Logic function. This third version uses Ternary operator.

It accepts Fizz and Buzz Value arguments. For each number from 1 to 100 it performs the same checks as the first version, but rewriting If/Else statements using Ternary operator syntax in a single line of code.

The value variable has 4 possible oucomes - "Fizz", "Buzz", concatenated Fizz and Buzz (ie. "FizzBuzz") or the current number - i. This evaluation uses the fact that logical OR operator (ie. ||) can operate on strings and integers too, not only on true/false Boolean values. In this case, it will evaluate to number i only if the value on the left side of OR operator is empty string (ie. "").

After looping through all the 100 numbers, it returns the final Fizz Buzz returnArray

3) displayData function

Function displayData is the View function. It displays Fizz Buzz data on the web page.

It accepts an array of Fizz Buzz string values as the argument. And then uses template tag method to format the output table with 5 columns per row. The row template is defined inside app.html file using <template>, <td> and <tr> HTML tags.

A FOR loop runs from the start to the end of fbData array, in steps of 5 - taking values for each row of the table, consisting of 5 cells.

For each value a CSS class name equal to its value is assigned (ie. Fizz, Buzz, FizzBuzz - classes defined in .css file). And the value is inserted into rowCols array of row values.

Each table row is then displayed on the webpage.