function getValues() {
                      // get values from DOM.
                      let fizzValue = document.getElementById("fizzValue").value;
                      let buzzValue = document.getElementById("buzzValue").value;
                      
                     
                      // parse the values into integers.
                      fizzValue = parseInt(fizzValue);
                      buzzValue = parseInt(buzzValue);
                      
                      if(Number.isInteger(fizzValue) && Number.isInteger(buzzValue)){
                         
                          let fbData = FizzBuzz(fizzValue,buzzValue);
                          displayData(fbData);
                  
                      } else {
                          alert("Please enter only integers!")
                      }     
                   }
                  
                  
                  //Traditional Solve Fizz Buzz with a for loop
                  function FizzBuzz(fizzValue, buzzValue) {
                      
                      let returnArray = [];
                  
                      for (let index = 1; index <= 100; index++) {
                          
                          if(index % fizzValue == 0 && index % buzzValue == 0){
                              returnArray.push("FizzBuzz");
                          } else if (index % fizzValue == 0){
                              returnArray.push("Fizz");
                          } else if (index % buzzValue == 0){
                              returnArray.push("Buzz");
                          } else {
                              returnArray.push(index);
                          }   
                      }
                  
                      return returnArray;
                  }
                  
                  //custom display function
                  function displayData(fbData) {
                  
                      //get the table body element from the page
                      let tableBody = document.getElementById("results");
                  
                      //get the row template
                      let templateRow = document.getElementById("fbTemplate");
                  
                      //clear the table.
                      tableBody.innerHTML = "";
                  
                      for (let i = 0; i < fbData.length; i += 5) {
                          const tableRow = document.importNode(templateRow.content, true);
                          //grab only the columns in the template
                          let rowCols = tableRow.querySelectorAll("td");
                  
                          rowCols[0].classList.add(fbData[i]);
                          rowCols[0].textContent = fbData[i];
                         
                          rowCols[1].classList.add(fbData[i+ 1]);
                          rowCols[1].textContent = fbData[i + 1];
                         
                          rowCols[2].classList.add(fbData[i+2]);
                          rowCols[2].textContent = fbData[i + 2];
                         
                          rowCols[3].classList.add(fbData[i+3]);
                          rowCols[3].textContent = fbData[i + 3];
                         
                          rowCols[4].classList.add(fbData[i+4]);
                          rowCols[4].textContent = fbData[i + 4];
                  
                          tableBody.appendChild(tableRow);
                      }
                  }
                
                

A program that counts from 1 to 100 and checks for divisbility of the two entered numbers (default 3 and 5). If the number is divisble by the first value it prints Fizz. If the number is divisble by the second value it prints Buzz. If the number is divisible by both values it prints FizzBuzz. The Fizz, Buzz, and FizzBuzz are colored in the output using matching css selectors. The program is made up of three functions. getValues(), FizzBuzz(), and displayData().

getValues()

This function gets the values from the document object model. It then converts the values into integers. If they are not integers it alerts the user.

FizzBuzz()

This function checks for divisbility. It uses a for loop to check the index value for divisbility by the values entered and appends the number if they are not. It appends "Fizz" if the number is divisible by the first value. It appends "Buzz" if the number is divisble by the second value. If the number is divisible by both values then it appends "FizzBuzz".

displayData()

This function gets a premade template from the app.html document and loads the array of values returned from FizzBuzz(). It then adds them to the table five per row and colors them using CSS selectors.