The Code
let fbData = [];
function getNumbers() {
let fizzValue = parseInt(document.getElementById("fizzValue").value) || 3;
let buzzValue = parseInt(document.getElementById('buzzValue').value) || 5;
let errorState = false;
let errorMsg = "";
fbData = [];
// Verify that we have numbers
if (isNaN(fizzValue) || isNaN(buzzValue)) {
errorState = true;
errorMsg += 'Please use a number.
'
}
if (errorState) {
Swal.fire({
title: 'Something went wrong',
html: `${errorMsg}`,
confirmButtonText: 'OK'
})
} else {
generateFizzBuzzArray(fizzValue, buzzValue);
displayData(fbData);
document.getElementById('customRangeEnd').value = ''
document.getElementById('customRangeStart').value = ''
document.getElementById('')
}
}
function generateFizzBuzzArray(fizz, buzz) {
let startNumber = parseInt(document.getElementById('customRangeStart').value) || 1;
let endNumber = parseInt(document.getElementById('customRangeEnd').value) || 100;
//error handling for bigger starting number
if (startNumber > endNumber) {
let tempNumber = startNumber;
startNumber = endNumber;
endNumber = tempNumber;
}
for (let i = startNumber; i < endNumber + 1; i++) {
if (i % fizz == 0 && i % buzz == 0) {
fbData.push('FizzBuzz')
} else if (i % fizz == 0) {
fbData.push('Fizz')
} else if (i % buzz == 0) {
fbData.push('Buzz')
} else {
fbData.push(i)
}
}
}
function displayData(fizzBuzzData) {
if (fizzBuzzData.length % 5 == 0) {
divisibleBy5(fizzBuzzData);
} else if (fizzBuzzData.length % 4 == 0) {
divisibleBy4(fizzBuzzData);
} else if (fizzBuzzData.length % 3 == 0) {
divisibleBy3(fizzBuzzData);
} else if (fizzBuzzData.length % 2 == 0) {
divisibleBy2(fizzBuzzData);
} else {
return;
}
}
function divisibleBy5(fizzBuzzData) {
let tableBody = document.getElementById("tableBody");
let templateRow = document.getElementById("fbTemplate");
tableBody.innerHTML = "";
for (let i = 0; i < fizzBuzzData.length; i += 5) {
const tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fizzBuzzData[i]);
rowCols[0].textContent = fizzBuzzData[i];
rowCols[1].classList.add(fizzBuzzData[i + 1]);
rowCols[1].textContent = fizzBuzzData[i + 1];
rowCols[2].classList.add(fizzBuzzData[i + 2]);
rowCols[2].textContent = fizzBuzzData[i + 2];
rowCols[3].classList.add(fizzBuzzData[i + 3]);
rowCols[3].textContent = fizzBuzzData[i + 3];
rowCols[4].classList.add(fizzBuzzData[i + 4]);
rowCols[4].textContent = fizzBuzzData[i + 4];
tableBody.appendChild(tableRow);
}
}
function divisibleBy4(fizzBuzzData) {
let tableBody = document.getElementById("tableBody");
let templateRow = document.getElementById("fbTemplate4");
tableBody.innerHTML = "";
for (let i = 0; i < fizzBuzzData.length; i += 4) {
const tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fizzBuzzData[i]);
rowCols[0].textContent = fizzBuzzData[i];
rowCols[1].classList.add(fizzBuzzData[i + 1]);
rowCols[1].textContent = fizzBuzzData[i + 1];
rowCols[2].classList.add(fizzBuzzData[i + 2]);
rowCols[2].textContent = fizzBuzzData[i + 2];
rowCols[3].classList.add(fizzBuzzData[i + 3]);
rowCols[3].textContent = fizzBuzzData[i + 3];
tableBody.appendChild(tableRow);
}
}
function divisibleBy3(fizzBuzzData) {
let tableBody = document.getElementById("tableBody");
let templateRow = document.getElementById("fbTemplate3");
tableBody.innerHTML = "";
for (let i = 0; i < fizzBuzzData.length; i += 3) {
const tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fizzBuzzData[i]);
rowCols[0].textContent = fizzBuzzData[i];
rowCols[1].classList.add(fizzBuzzData[i + 1]);
rowCols[1].textContent = fizzBuzzData[i + 1];
rowCols[2].classList.add(fizzBuzzData[i + 2]);
rowCols[2].textContent = fizzBuzzData[i + 2];
tableBody.appendChild(tableRow);
}
}
function divisibleBy2(fizzBuzzData) {
let tableBody = document.getElementById("tableBody2");
let templateRow = document.getElementById("fbTemplate");
tableBody.innerHTML = "";
for (let i = 0; i < fizzBuzzData.length; i += 2) {
const tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].classList.add(fizzBuzzData[i]);
rowCols[0].textContent = fizzBuzzData[i];
rowCols[1].classList.add(fizzBuzzData[i + 1]);
rowCols[1].textContent = fizzBuzzData[i + 1];
tableBody.appendChild(tableRow);
}
}
My implementation of Fizz Buzz uses one global variable (fbData) and 3 functions
This function is called when someone presses the button from the app.html page or presses enter inside one of the number input forms.
The values are taken from the input forms or set to a default value. I've included some error handling in the off chance someone enters something that is not a number.
Finally we call generateFizzBuzzArray() and displayData()
This function requires two arguments, fizz and buzz. These will be used to determine which numbers are changed to fizz and buzz. I created a global variable called fbData to hold our array.
We use a for loop to check if each number between 1 and 100 is divisible evenly by our fizz and buzz varialbes. If our current number is divisible evenly by both fizz and buzz, we push FizzBuzz to our datta array. If its only divisibly by fizz we push Fizz and if its divisibly by buzz we push Buzz. If none of thats true, we just push the current number.
The primary job of this function is to output a table filled with our fizz buzz values. First we get a handle on our doucment. We grab our table body, because thats where we are going to show our output. And we get our template for easy formatting. Its important to clear our table, so that it is blank when we add data. we do this with tableBody.innerHTML = "";
Our template consists of one row with 5 data cells. Since we know this for a fact, we will be hard coding the data display. If we did not know that, I would dynamically add rows and tables in my loop. The for loop iterates over the length of our data-set and builds a new row each loop. We are building 5 cells at a time, so we are incrementing by 5 each time.
tableRow is a constant, since it represents the row of our template. Using importNode(templateRow.content, true) we are able to make a variable rowCols to hold all the data cells. Next we add a class to each td, and fill its textContent with our data. Finally we use tableBody.appendChild(tableRow) to add our row into the output table.