FIZZ BUZZ Code
//get values from the page for start and ending inputs
const getValues = () => {
let fizzValue = document.getElementById('fizzValue').value;
let buzzValue = document.getElementById('buzzValue').value;
//input validation, parse into integers
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
//integer check:
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)) {
//generateNumbers, or fizzBuzz
let fbArray = fizzBuzz(fizzValue, buzzValue);
displayData(fbArray);
} else {
alert('You must enter integers');
}
};
const fizzBuzz = (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;
};
//empty string '' evaluates to false
//loop over the array and create a tablerow for each item.
const displayData = (fbArray) => {
let tableBody = document.getElementById('results');
//get the template row
let templateRow = document.getElementById('fbTemplate');
//clear the table
tableBody.innerHTML = '';
for (let index = 0; index < fbArray.length; index += 5) {
let tableRow = document.importNode(templateRow.content, true);
//grab the td's to put into the array
let rowCols = tableRow.querySelectorAll('td');
//add css styling with classList.add
rowCols[0].classList.add(fbArray[index]);
//column 1 on the table, etc...
rowCols[0].textContent = fbArray[index];
rowCols[1].classList.add(fbArray[index + 1]);
rowCols[1].textContent = fbArray[index + 1];
rowCols[2].classList.add(fbArray[index + 2]);
rowCols[2].textContent = fbArray[index + 2];
rowCols[3].classList.add(fbArray[index + 3]);
rowCols[3].textContent = fbArray[index + 3];
rowCols[4].classList.add(fbArray[index + 4]);
rowCols[4].textContent = fbArray[index + 4];
tableBody.appendChild(tableRow);
}
};
Hello World!