The Code
function getValues() {
let fizzValue = document.getElementById('fizzValue').value;
let buzzValue = document.getElementById('buzzValue').value;
let stopValue = document.getElementById('stopValue').value;
fizzValue = parseInt(fizzValue);
buzzValue = parseInt(buzzValue);
stopValue = parseInt(stopValue);
if (isNaN(fizzValue) && isNaN(buzzValue) && isNaN(stopValue)) {
Swal.fire(
{
icon: 'error',
title: 'Uh oh!',
text: 'Please enter a valid number for both the start and end values.',
backdrop: false
}
);
} else if (stopValue > 5000) {
Swal.fire(
{
icon: 'error',
title: 'Uh oh!',
text: 'Please enter a valid number for both the start and end values.',
backdrop: false
}
);
} else {
let fizzBuzzArray = generateFizzBuzz(fizzValue, buzzValue, stopValue);
displayFizzBuzz(fizzBuzzArray);
}
}
function generateFizzBuzz(fizzValue, buzzValue, stopValue) {
let generatedValues = [];
for (let number = 1; number <= stopValue; number++) {
let value = '';
if (number % fizzValue == 0 && number % buzzValue == 0) {
generatedValues.push('FizzBuzz');
} else if (number % fizzValue == 0) {
generatedValues.push('Fizz');;
} else if (number % buzzValue == 0) {
generatedValues.push('Buzz');
} else {
generatedValues.push(number);;
}
}
return generatedValues;
}
function displayFizzBuzz(generatedValues) {
let resultsTable = document.getElementById('result');
let resultHtml = '';
// for each number in values:
for (let i = 0; i < generatedValues.length; i++) {
let value = generatedValues[i];
if (i % 5 == 0) {
resultHtml += '<tr>';
}
let htmlForValue = `<td class="${value}">${value}</td>`;
resultHtml += htmlForValue;
if ((i + 1) % 5 === 0) {
resultHtml += '</tr>';
}
}
resultsTable.innerHTML = resultHtml;
}
>
The code is structured in 3 functions
getValues()
The getValues
function in JavaScript gathers input values for
"Fizz," "Buzz," and "Stop" converting them into numbers. It checks if all the values are valid numbers; if not,
it displays an error message. Additionally, it ensures that the "Stop" value is not greater than 5000,
showing the same error if the condition is not met. When the input validation is successful,
the function calls another function, generateFizzBuzz, to create an array of FizzBuzz numbers based
on the provided inputs. It uses the displayFizzBuzz function to show the generated numbers.
generateFizzBuzz()
The generateFizzBuzz
function in JavaScript produces a sequence of values based
on given parameters: fizzValue, buzzValue, and stopValue. It initializes an empty array
called generatedValues. Using a loop that counts from 1 to the specified stopValue,
it examines each number. Depending on whether the number is divisible by both fizzValue and
buzzValue, only fizzValue, only buzzValue, or neither, it adds the corresponding
label ('FizzBuzz', 'Fizz', 'Buzz', or the number itself) to the generatedValues array.
The function then returns this array containing the FizzBuzz sequence up to the specified
stopValue.
displayFizzBuzz()
The displayFizzBuzz
function in JavaScript takes an array of generated values
and displays them in a table. It finds an HTML element with the ID 'result' to
show the table. The function creates HTML code for each value in the array and adds it to the table.
For every fifth value, it starts a new row in the table. After processing all values, the updated HTML
is set as the content of the 'result' element, displaying the FizzBuzz sequence in a neat table format.
In simpler terms, this function arranges the FizzBuzz values in rows and columns and shows them on
the webpage.