//  get values from user. get fizz value and buzz value.
function getValues() {
    let buzzValue = document.getElementById("buzzValue").value;
    let fizzValue = document.getElementById("fizzValue").value;

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

  // check that numbers are integers
  if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
    // call logic function
    let fbArray = fizzBuzz(fizzValue, buzzValue);
    // call display function
    display(fbArray);
  } else {
    alert("You must enter a integer");
  }
}


//logic
function fizzBuzz(fizzValue, buzzValue) {
    let returnArray = [];
    // loop from 1 to 100 and find factors of fizz and buzz value
    for (let i = 1; i <= 100; i++) {
      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;
  }


  // view
function display(fbArray) {
  let tableBody = document.getElementById("results");

  let templateRow = document.getElementById("fbTemplate");

  // clears the table after every run
  tableBody.innerHTML = "";

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

    let rowCols = tableRow.querySelectorAll("td");
    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];

    tableBody.appendChild(tableRow);
  }
}
                            
                 
                    
                

getValues()

The getValues is function is the model in this application. It receives the user input and and calls on the controller which does all the logic and the view to in order to display the information

fizzBuzz()

The fizzBuzz function is the controller of the application. It runs a loop from 1 to 100 and inserts all those numbers into an array called returnArray. Any value that is a factor of both the fizzValue and the buzzValue is then replaced by the word FizzBuzz. Any number that is just a factor of the fizzValue is replaced by the word Fizz, and lastly, any number that is a factor of the buzzValue is replaced by Buzz. At the end of the function, the array is returned.