The Code for FIZZ BUZZ
function getValues() {
// get the user values (fizz and buzz) from form
let fizzValue = document.querySelector('#txtFizz').value;
let buzzValue = document.querySelector('#txtBuzz').value;
// check for numbers
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
// check that the numbers are integers
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
// call fizzbuzz
let fbArray = fizzBuzzC(fizzValue, buzzValue);
// call display and write values to screen
displayData(fbArray);
} else {
alert('You must enter integer values');
}
}
// Using the If statement
function fizzBuzzA(fizzValue, buzzValue) {
let returnArray = [];
for (let i = 1; i <= 100; i++) {
// if divisible by both (fizz and buzz)
// if divisible by just (fizz)
// if divisible by just (buzz)
if (i % fizzValue == 0 && i % buzzValue == 0) {
returnArray.push('FizzBuzz');
} else if (i % fizzValue == 0) {
returnArray.push('Fizz');
} else if (i % buzzValue == 0) {
returnArray.push('Buzz');
} else {
returnArray.push(i);
}
}
return returnArray;
}
// Using the Switch statement
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;
}
// Using the Ternary statement
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;
}
function displayData(fbArray) {
// get the table body element from the page
let tableBody = document.querySelector('#tableResults');
// get the template row
let templateRow = document.querySelector('#fbTemplate');
// clear table
tableBody.innerHTML = '';
for (let i = 0; i < fbArray.length; i += 5) {
let tableRow = document.importNode(templateRow.content, true);
//insert values into row (5 columns)
let rowCols = tableRow.querySelectorAll('td');
for (let col = 0; col <= 4; col++) {
rowCols[col].textContent = fbArray[i + col];
rowCols[col].classList.add(fbArray[i + col]);
}
// add row to table
tableBody.appendChild(tableRow);
}
}
The Code is structured in several functions.
getValues
Gets the user input and validates the values. Calls the functions to process the values.
fizzBuzzC
Creates an array of values based on user input ("Fizz" and "Buzz") and divisibility.
I used fuzzBuzzC (Ternary statment) for this program.
displayData
Displays the array of numbers in a 5 column table of rows with fizzbuzz values bolded and colored accordingly.