The Code
// get the values from the ui
function getValues() {
// take the values for fizz and buzz and parse them to int
let fizzValue = document.getElementById("fizz").value;
fizzValue = Number.parseInt(fizzValue);
let buzzValue = document.getElementById("buzz").value;
buzzValue = Number.parseInt(buzzValue);
// getting the results element and saving to a variable
let resultsDiv = document.getElementById("results");
// create error message to present in case of wrong value entry
let errorMessage = `
You must enter valid integers in order to continue...
`;
// making sure the results element is empty and posting results
resultsDiv.innerHTML = "";
// perform checks an the entered values
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
// call makeBubles function to reate the values
let results = makeBubblesTurnary(fizzValue, buzzValue);
resultsDiv.innerHTML += displayBubbles(results);
} else {
// display error message
resultsDiv.innerHTML += errorMessage;
}
}
// create function that handles the checking and creating the values
function makeBubbles(fizzValue, buzzValue) {
// create an empty array to store values
let numbers = [];
// checking for each condition and entering the value in to the array
for (let i = 1; i <= 100; i++) {
if ((i % fizzValue === 0) && (i % buzzValue === 0)) {
numbers.push('FizzBuzz');
} else if (i % fizzValue === 0) {
numbers.push('Fizz');
} else if (i % buzzValue === 0) {
numbers.push('Buzz');
} else {
numbers.push(i);
}
}
// return the values
return numbers;
}
function makeBubblesSwitch(fizzValue, buzzValue) {
let numbers = [];
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:
numbers.push("FizzBuzz");
break;
case fizz:
numbers.push("Fizz");
break;
case buzz:
numbers.push("Buzz");
break;
default:
numbers.push(i);
break;
}
}
return numbers;
}
function makeBubblesTurnary(fizzValue, buzzValue) {
let numbers = [];
for (let i = 1; i <= 100; i++) {
// using a ternary operator we check for the divisibility of the two values
let value = ((i % fizzValue === 0 ? 'Fizz' : '') + (i % buzzValue === 0 ? 'Buzz' : '') || i);
numbers.push(value);
}
return numbers;
}
function displayBubbles(numbers) {
// create an variable that helps with looping
let index = 0
// create a template string
let template = ``;
// create classes for text decoration
let fizzText = "text-success";
let buzzText = "text-primary";
let fizzBuzzText = "fw-bold text-danger";
// using two for loops in order to create
// a 5 column table. the first one loops
// 20 times, and on each loop it creates a new row
// and the second one loops 5 times, performing
// checks and creating the appropriate template each time.
for (let i = 0; i < 20; i++) {
template += ``;
for (let j = 0; j < 5; j++) {
if (numbers[index] === "Fizz") {
template += `${numbers[index]} `;
} else if (numbers[index] === "Buzz") {
template += `${numbers[index]} `;
} else if (numbers[index] === "FizzBuzz") {
template += `${numbers[index]} `;
} else {
template += `${numbers[index]} `;
}
index++;
}
template += ` `;
}
return template;
}
document.getElementById('bubblyBtn').addEventListener('click', getValues);
The Code is structured in three functions
getValues
First we get the values for Fizz and Buzz, and convert them to Integers using the .parseInt method from the Number Class. After we get the resultsDiv so it is easier for us to insert the results later and then we create a errorMessage variable containing instructions to insert if the values entered could not be converted to integers. Next we make sure the #results element is empty and then we check to see if the values have been converted successfully using the isInteger method from the Number Class. If they were, we call the makeBubbles function where we pass the fizzValue and the buzzValue variables created earlier and store te returned values in to the results variable. Next, we call the displayBubbles function to wich we pass the results variable. The returned template string will the be pushed to the resultsDiv using the .innerHtml property. If the values were not converted, then we insert the error message created previosly.
makeBubbles
The function takes the values for Fizz and Buzz as parameters. After, we create an empty array, and using a for loop we count to 100 and on each iteration we perform checks for the divisibility of the values with the current number, and depending on the result, we push the result to the array. In the end we return the array filled with the resulted values.
makeBubblesSwith
The function takes the same two parameters as the makeBubbles function. After, we create the same array, but we create two more boolean variables and we initialize them as false. Next, we create a for loop and for each number, we check the divisibility with the passed variables. Then, using a switch statement that checks for true values, and depending on the result, we push the correct value to the array. In the end, we return the array.
makeBubblesTernary
This function takes the same two parameters as the two functions above, the only difference is that it does the divisibility checks using a ternary operator. The ternary operator (?) in essence is an in-line if statement. It uses the ? (question mark) do end the statement, and after it, we can put what we want to happen, separated by :(colon). To the left of the : we put what we want to happen if the statement is true, and to the right if the statement is false. So, our functions first checks if the i value is divisible with the fizz value. If it is, we will have the text Fizz added to our value variable. If not, we will have an empty string wich in essence is a false value. Next, we do the same thing for the buzz value. If both the statements return false values, we use the or operator (||) to add i to the value variable. After all the checks are done, we push the value variable to our numbers variable and proceed with the the variation of the loop. In the end, we return the numbers array to be used in the next step.
displayBubbles
First, we create a index variable that will help us with the looping, and initialize it with 0. Afterm we create a template variable and leave it empty. Next, we create three variables that we will help us with the stying of the results. Each is named after it's coresponding value and styling them differently. Next we create two for loops. We are using this algorithm in order to create a 5 column table. That's why, the first one loops 20 times. On each loop we add a tr element to the template string. Next we start a new for loop but this time it loops 5 times, one time per table column. On each loop, we use if statements and the index variable to check the value of the current array index . Depending on the result, we add a new data cell to the template string and style it using one of the variables we created earlier. All of this is possible using template strings. After the second for loop ends, we add a closing tr tag to the template, and go on to the second loop of 20. In the end, we return the template string that contains all the rows and columns of the table.