FIZZ BUZZ's Code:
function getValues() {
let fizzValue = parseInt(document.getElementById("fizzValue").value);
let buzzValue = parseInt(document.getElementById("buzzValue").value);
if(Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
let fizzBuzzArray = generateData(fizzValue, buzzValue);
displayData(fizzBuzzArray);
} else {
alert("You must enter an integer");
}
}
function generateData(fizzValue, buzzValue) {
let returnArray = [];
for (let i = 1; i <= 100; i++) {
//ternary operator evaluates true false
let value = (( i % fizzValue === 0 ? "Fizz": "")
+ (i % buzzValue === 0 ? "Buzz" : "" ) || i );
returnArray.push(value);
}
return returnArray;
}
function displayData(fizzBuzzArray) {
//get the table body element from the page
let tableBody = document.getElementById("results");
//get the template itsself
let templateRow = document.getElementById("fizzBuzzTemplate");
//clear table
tableBody.innerHTML = "";
for (let i = 0; i < fizzBuzzArray.length; i += 5) {
let tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fizzBuzzArray[i]);
rowCols[0].textContent = fizzBuzzArray[i];
rowCols[1].classList.add(fizzBuzzArray[i + 1]);
rowCols[1].textContent = fizzBuzzArray[i + 1];
rowCols[2].classList.add(fizzBuzzArray[i + 2]);
rowCols[2].textContent = fizzBuzzArray[i + 2];
rowCols[3].classList.add(fizzBuzzArray[i + 3]);
rowCols[3].textContent = fizzBuzzArray[i + 3];
rowCols[4].classList.add(fizzBuzzArray[i + 4]);
rowCols[4].textContent = fizzBuzzArray[i + 4];
tableBody.appendChild(tableRow);
}
}
The Design:
To keep the code as clean as possible, the program is encapsulated into three functions:
getValues
generateData
displayData
This function serves as the entry point to the program, being the function called by the button's click event listener. First, it stores the user input into variables by accessing the value property from the fizzValue and buzzValue elements. Next, it castes these variables from string to number types, and validates that they are integers. Next, it creates a local array called fizzBuzzArray and assigns it the array returned by the generateData function, passing it the fizzValue and buzzValue variables. Lastly, it calls the displayData function, passing it the newley generated fizzBuzzArray as it's argument.
This function serves as the main logic of the program, being responsible for generating the array of numbers and replacing certain numbers with their corresponding fizzbuzz value. To do this, first the returnArray is initialized. Next, there is a for loop looping from 1-100(including the 100). Within this loop, there is a variable being defined called value which contains the result of the following conditional expression. This expression uses two ternaryy operators to build a FizzBuzz string. It essentially reads, if the current index(i) in the loop is a multiple of the fizzValue set value to "Fizz" , if it's not a multiple then set value to "". It does the same thing for the buzzValue and concatinates those two expression results together as either "Fizz" + "" = "Fizz", "" + "Buzz" = "Buzz", "Fizz" + "Buzz" = "FizzBuzz", or finally simply the value of the index(i) in the scenario where it is an empty string. It then pushes this value to the array and repeats this process until the loop finishes. Lastly, it returns this array.
displayData uses a more modular approach to modifying the DOM and displaying the fizzBuzzArray. This modular approach consists of using the following template tag under the fizzBuzzTemplate id:
<template id="fizzBuzzTemplate">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
Within the displayData function itsself, it first stores two variables: tableBody, and templateRow. The tableBody variable gets assigned the "results" table that will store the results of the data. The templateRow variable gets assigned the fizzBuzzTemplate displayed above. Next, the table is cleared to ensure that there is no data in it before the function begins to add the data to it. There is then a for loop going from 0 to the length of the fizzBuzzArray(passed in as an argument) and incrementing 5 at a time, since there will be 5 columns per row. The first thing done inside of this loop is the initialization of the tableRow variable. It's value is the value returned by the document.importNode method. This method creates a copy of a DocumentFragment(the template) from the app.html page. It takes two arguments, the first being the templateRow.content which is a copy of the current content in the templateRow template. The second argument is "true" which tells the method to include the DocumentFragment's descendents which is important for this project. Next, the variable rowCols is initialized to one td element in the template. The function then does two things five times per iteration. First, it adds the fizzBuzzArray value to classList to add in different colored styling for each fizzbuzz element. Second, it assigns the textContent of the current td in the rowCols array to the current fizzBuzzArray element, inserting the actual value into the td element. Once it does this five times, for each td value, it then calls the appendChild method on the tableBody variable and adds this tableRow to it. This happens 100 times and the program finishes with an updated table of data.