The Code for FizzBuzz
//get fizz and buzz values from the user
//controller function
function getValues() {
//get user values from page
let fizzValue = document.getElementById("fizzValue").value;
let buzzValue = document.getElementById("buzzValue").value;
//parse for integers
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
//check that the values are integers
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
//call FizzBuzz
let fbArray = fizzBuzzC(fizzValue, buzzValue);
//call displayValues
displayValues(fbArray);
}
else {
alert("You must enter integersg!");
}
}
//For-Loop Solution
//logic function
function fizzBuzzA(fizzValue, buzzValue) {
//initialize empty array
let returnArray = [];
//loop from 1 to 100
for (let i = 1; i <= 100; i++) {
//check to see if divisible by both fizz and buzz value
if(i % fizzValue == 0 && i % buzzValue == 0) {
returnArray.push('FizzBuzz');
}
//check to see if divisible by fizz value
else if(i % fizzValue == 0) {
returnArray.push('Fizz');
}
//check to see if divisible by fizz value
else if(i % buzzValue == 0) {
returnArray.push('Buzz');
}
else {
returnArray.push(i);
}
}
return returnArray;
}
//Switch Statement Solution
//logic function
function fizzBuzzB(fizzValue, buzzValue) {
let returnArray = [];
let Fizz = false;
let Buzz = false;
for (let i = 1; i <= 100; i++) {
Fizz = i % fizzValue == 0;
Buzz = i % buzzValue == 0;
switch(true) {
case Fizz && Buzz: {
returnArray.push('FizzBuzz');
break;
}
case Fizz: {
returnArray.push('Fizz');
break;
}
case Buzz: {
returnArray.push('Buzz');
break;
}
default: {
returnArray.push(i);
break;
}
}
}
return returnArray;
}
//Ternary Operator Solution
//logic function
function fizzBuzzC(fizzValue, buzzValue) {
let returnArray = [];
for (let i = 1; i <= 100; i++) {
let value = ((i % fizzValue == 0 ? 'Fizz' : '') + (i % buzzValue == 0 ? 'Buzz' : '') || i)
returnArray.push(value);
}
return returnArray;
}
//Display reversed string to user
//view function
function displayValues(fbArray) {
//get table body element from the page
let tableBody = document.getElementById("results");
//get template row
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 all the td tags to put in the 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);
}
}
There are also three different solutions provided as I had fun solving this problem!
getValues
The getValues function gets the value for fizz and buzz from the app page. The function utilizes the getElementById to pull the values from the page. We make sure the numbers for fizz and buzz are Integers, and if they are, we pass the values fizzValue and buzzValue to the fizzBuzz function. The function fizzBuzz then returns an array that we set to the value fbArray before we pass that same value to the displayValues function. For this solution, we have chosen to select fizzBuzzC as our logic function to solve this problem!
fizzBuzzA (For-Loop Solution)
This fizzBuzz function is the For-Loop Solution. It takes in two parameters (fizzValue and fizzValue). We initalize an empty array to returnArray. We then use a for loop to go through numbers 1 to 100, storing a value into the array for each number. Using the modulus operator, if the number is divisible by fizzValue and buzzValue, we push in the word FizzBuzz. Else, if the number is not divisible by both fizz and buzz values, but only by fizzValue, we push in the word Fizz. Else, if the number is not divisible by both fizz and buzz values, or the fizzValue, but is divisible by buzzValue we push in the word Buzz. If none of these previous options are valid, then we send in the number at index 'i' to the array, returnArray.
fizzBuzzB (Switch Statement Solution)
This fizzBuzz function is the Switch Statement Solution. It takes in two parameters (fizzValue and fizzValue). We initalize an empty array to returnArray, and set boolean values Fizz and Buzz to false. We then use a for loop to go through numbers 1 to 100, and set statements for when Fizz and Buzz are divisible that they would be true. Using a switch statement, in the case where Fizz and Buzz are true, we push in the word FizzBuzz to the array at that index. In the case where Fizz is only true, we push in the word Fizz to the array at that index. In the case where Buzz is only true, we push in the word Buzz to the array at that index. The default case is just to push the number value of the index into the array returnArray if the previous conditions were not met.
fizzBuzzC (Ternary Operator Solution)
This fizzBuzz function is the Ternary Operator Solution. It takes in two parameters (fizzValue and fizzValue). We initalize an empty array to returnArray. We then use a for loop to go through numbers 1 to 100, and inside the loop we use a ternary operator for when the fizzValue is divisble by 'i', that we add the word Fizz to the array, additionally, we use a ternary operator for when the buzzValue is divisble by 'i', that we add the word Buzz to the array, OR we add the value 'i' to the array. This helps us cover the case where we need to add the word FizzBuzz to the array, as we concatenate the word Fizz with Buzz when both are divisible by 'i'. The array returnArray is then returned.
displayValues
The function displayValues takes in the parameter fbArray (the variable is an array that now holds the list of FizzBuzz values from 1 to 100). We then get tableBody and templateRow from our HTML. We then clear the table before adding values. Then we create a for loop that increments 5 values at a time and also create values tableRow and rowCols to grab all the td tags in our HTML. Then at each of the 5 indices at a time for each of the 5 rows, we add the class element from the CSS to provide the colour for our words in our display, while also adding the content into the td tags. We then append all 5 values into our rows inside of our template element inside our HTML where the final display is shown to the user!