The Code for FizzBuzz
// Get user input for fizz and buzz values
// Controller function
function getValues() {
let fizzValue = document.getElementById("fizz").value;
let buzzValue = document.getElementById("buzz").value;
// Parse for integers
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
// If integers, continue
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
let results = fizzBuzz(fizzValue, buzzValue);
displayResults(results);
} else {
alert("You did not enter an integer!");
}
}
// Logic Function
function fizzBuzz(fizzValue, buzzValue) {
let results = [];
// Loop through 1 - 100, using conditional logic to determine FizzBuzz
for (let i = 1; i <= 100; i++) {
if (i % fizzValue == 0 && i % buzzValue == 0) {
results.push("FizzBuzz");
} else if (i % fizzValue == 0) {
results.push("Fizz");
} else if (i % buzzValue == 0) {
results.push("Buzz");
} else {
results.push(i);
}
}
return results;
}
// Display results
// View function
function displayResults(resultsArray) {
let tableBody = document.getElementById("results");
let templateRow = document.getElementById("fbTemplate");
// Make sure table is clear
tableBody.innerHTML= "";
for (let i = 0; i < resultsArray.length; i += 5) {
let tableRow = document.importNode(templateRow.content, true);
// Get the elements to put in the array
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(resultsArray[i]);
rowCols[0].textContent = resultsArray[i];
rowCols[1].classList.add(resultsArray[i + 1]);
rowCols[1].textContent = resultsArray[i + 1];
rowCols[2].classList.add(resultsArray[i + 2]);
rowCols[2].textContent = resultsArray[i + 2];
rowCols[3].classList.add(resultsArray[i + 3]);
rowCols[3].textContent = resultsArray[i + 3];
rowCols[4].classList.add(resultsArray[i + 4]);
rowCols[4].textContent = resultsArray[i + 4];
tableBody.appendChild(tableRow);
}
}
getValues()
First I assign the user's input to the variable fizzValue and buzzValue. Then I use parseInt() along with some conditional logic to ensure the rest of the code only runs if the user entered valid integers. If the user input is valid, then a results variable is declared with the results from the called function fizzBuzz(), which is called with the arguments fizzValue and buzzValue passed into it. Once that is finished, the function displayResults() is called with the variable results as it's argument.
fizzBuzz()
This function handles the logic. First, I declare an empty array results. Then, using a combination of a for loop and conditional logic, I iterate through the numbers 1 - 100 inclusive, applying the FizzBuzz logic to each iteration, and pushing it to results. This function then returns that array.
displayResults()
The majority of the DOM manipulation is handled by this function. In the app.html document I inserted a template tag that includes a tr tag with 5 td tags. This template has an ID of templateRow. Using this, and a for loop, I set a variable tableRow to the content of that template row using document.importNode. I will be modifying the contents of the template and adding it to the HTML with every iteration of this loop. I know there are 5 rows, so each iteration of this for loop will add 5 to 'i'. Using that knowledge, I set each table data tag equal to the result of each iteration of the resultsArray. It should also be known that my css stylesheet includes styling for 'Fizz', 'Buzz', and 'FizzBuzz' - so I am also adding the result to the class list of each table data tag for additional styling. At the end of each iteration, I append the results to the HTML until the loop is finished and we have our results.