//get values from the DOM: fizzValue & buzzValue;
function getValues() {
  let fizzValue = document.getElementById("fizzValue").value;
  let buzzValue = document.getElementById("buzzValue").value;

  //VALIDATION:
  //Parse for numbers
  fizzValue = parseInt(fizzValue);
  buzzValue = parseInt(buzzValue);
  // convert strings to integers;
  if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
    /*LOGIC: CALL fizzBuzz--replace fizzBuzzA with 
    alternative functions fizzBuzzB &fizzBuzzC 
    HERE to test them*/
    let fbArray = fizzBuzzA(fizzValue, buzzValue);
    //CALL displayData & write values to the screen;
    displayData(fbArray);
  } else {
    alert("You must enter an integer.");
  }

  }
  //DISPLAY:DO FIZZBUZZ
//alternate solution A:
function fizzBuzzA(fizzValue, buzzValue) {
  let returnArray = [];
  //loop 1-100
  for (let i = 1; i <= 100; i++) {
    //Replace the number feature:
    //number / fizzValue && number / buzzValue =FizzBuzz
    if (i % fizzValue == 0 && i % buzzValue == 0) {
      returnArray.push("FizzBuzz");
    } else if (i % fizzValue == 0) {
      // number / fizzValue = Fizz;
      returnArray.push("Fizz");
    } else if (i % buzzValue == 0) {
      //number / buzzValue = Buzz;
      returnArray.push("Buzz");
    } else {
      /*IF none of the above conditions apply to 
      the number(i), push (i) into returnArray;*/
      returnArray.push(i);
    }
  }

  return returnArray;
}
/*alternate solution B: using a SWITCH statement; 
to test, chng function called 
on line 13 to fizzBuzzB*/
function fizzBuzzB(fizzValue, buzzValue) {
  let returnArray = [];
  //declaring the booleans:
  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;
}
/*alternate solution C: using a ternary operator
(most compact--one line); to test, 
chng function called on line 13 to fizzBuzzC*/
function fizzBuzzC(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 array and create a tablerow for each item. (inserted into td's)*/
function displayData(fbArray) {
  //get tbody element from DOM
  let tableBody = document.getElementById("results");

  //get template element from DOM
  let templateRow = document.getElementById("fbTemplate");
  //clear table
  tableBody.innerHTML = "";
  for (let index = 0; index< fbArray.length; index += 5) {
    let tableRow = document.importNode(templateRow.content, true);
    
    /*creates the individual rows for the "td"s 
    by putting them into array; modular approach to HTML
     construction without template literals; 
     dumps into the HTML fragment*/

    let rowCols = tableRow.querySelectorAll("td");

    rowCols[0].classList.add(fbArray[index]);
    rowCols[0].textContent = fbArray[index];

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

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

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

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

    tableBody.appendChild(tableRow);
  }
}
            
          

The code solves the classic interview question with three (3) possible iterators.

.JS FIZZ BUZZ

As the quintessential JavaScript interview question, this coding exercise loops through and displays numbers 1 to 100. Numbers divisible by user input, Fizz are replaced by the word, Fizz. Numbers divisible by user input, Buzz are replaced by the word, Buzz. When a number is divisible by both Fizz AND Buzz it is replaced by the word, FizzBuzz.

Brief code overview:

• Initiation:
  • the event listener (located in the bottom <script> tag on the app page) is triggered by a click on the submit button;
  
  
  • values from the two user input fields (fizzValue and buzzValue) are passed into the Get Values function;
  
  
• Validation:
  • inputs are checked to make certain they are integers (numbers) and not strings;
  
  
  • if inputs are numbers treated as strings, the program parses them to integers;
  
  
  • If inputs are text, the system will alert the user, "You must enter numbers";
  
  
• Logic:

  When the fizzBuzz function is called by declaring fbArray, the following processes occur:

  • the returnArray array is created;
  
  
  • the for loop begins at one (1) and increments the number by one until the incremented number is equal to 100;
  
  
  • each incremented number passes through a boolean test(s) to determine if the number is to be replaced by the word, Fizz, Buzz or FizzBuzz (more information in the Display section below);
  
  
  • results of each iteration is passed to the returnArray array;
  
  
  • the function returns the returnArray array;
  
  

• Display:
• Inside the for loop:
• A boolean tests each number for the following conditions:


• Numbers divisible by Fizz AND Buzz are pushed to the returnArray array as FizzBuzz ;


• Numbers divisible by Fizz are pushed to the returnArray array as Fizz;


• Numbers divisible by Buzz are pushed to the returnArray array as Buzz;


• Numbers testing false for all conditions are pushed to the returnArray array unchanged;


• The .js file to the left gives three possible ways to test the iterators:


• if/if else/else statement(see function fizzBuzzA);
• switch case statement(see function fizzBuzzB);
• ternary operator(see function fizzBuzzC);


• Display table:
  
  
  • created using an HTML fragment as an alternative to template literals;
  • table rows(in this case, five cells across) are populated by the for loop passing data to the fbArray when the displayData function is called;