// get values from user. We need to get the fizz and buzz value.
            function getValues()
            {
            
              // get the 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))
              {
                // call fizzBuzz
                let fbArray = fizzBuzz(fizzValue, buzzValue);
            
                // call displayData and write the values to the screen
                displayData(fbArray);
              }
              else
              {
                alert("You must enter an integer.")
              }
            }
            
            function fizzBuzz(fizzValue, buzzValue)
            {
              let returnArray = [];
            
              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;
            }
            
            // loop over the array and create a table row for each item
            function displayData(fbArray)
            {
              // get the table body element from the page
              let tableBody = document.getElementById("results");
            
              // get the template cell
              let templateRow = document.getElementById("fbTemplate");
            
              // clear table first
              tableBody.innerHTML = "";
            
              for (let i = 0; i < fbArray.length; i += 5)
              {
                let tableRow = document.importNode(templateRow.content, true);
                
                // grab just the  to put into an array
                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);
              }
            
            }
            
          
          

FizzBuzz Your Way

FizzBuzz takes in two parameters from the document by selecting them by their "id".

It then builds a array from 1-100 in the fizzBuzz function, returning Fizz for every element evenly divisible by the first parameter in the array, Buzz for each evenly divisible by the second parameter, and FizzBuzz for every element divisble by both.

A template is then selected from the document, and iterated over at an interval of 5 columns, updating the class styling of each element by it's own contents. Fizz, Buzz and FizzBuzz have been added to the CSS elements, so every element containing those class names will automatically have it's styling udpated to match.

Pretty Cool!