The Code

                        
                            // step 1: get the start and end numbers from input field
							function getValues() {
								// get the inputs by their ID
								let fizzString = document.getElementById('fizzValue').value;
								let buzzString = document.getElementById('buzzValue').value;
								let stopString = document.getElementById('stopValue').value;

								// Convert the fizz and buzz values to numbers
								let fizzNumber = parseInt(fizzString);
								let buzzNumber = parseInt(buzzString);
								let stopNumber = parseInt(stopString);

								// chek if the numbers are valid numbers
								if (
									!Number.isNaN(fizzNumber) &&
									!Number.isNaN(buzzNumber) &&
									!Number.isNaN(stopNumber)
								) {
									// tell the user to enter a valid number using sweet alert
									let fizzBuzvalues = generateFizzBuzz(fizzNumber, buzzNumber, stopNumber)
									displayFizzBuzz(fizzBuzvalues)
								} else if (fizzNumber > stopNumber || buzzNumber > stopNumber) {
									// tell the user what to do
									Swal.fire({
										icon: 'error',
										title: 'Almost there!',
										text: 'Fizz value, and buzzValue should not be greater than the Stop value.',
										backdrop: false,
									})
								} else if (fizzNumber == buzzNumber) {
									Swal.fire({
										icon: 'error',
										title: 'Uh oh!',
										text: 'The Fizz and Buzz number should not be the same value',
										backdrop: false,
									})
								} else if (stopNumber < 2 || stopNumber > 3000) {
									// tell the user it's wrong
									Swal.fire({
										icon: 'error',
										title: 'Uh oh!',
										text: 'Please enter a valid number between 2 and 3000.',
										backdrop: false,
									})
								} else {
									Swal.fire({
										icon: 'error',
										title: 'Oops! Invalid number.',
										text: 'Please enter a valid number for fizz, buzz, and the stop values.',
										backdrop: false,
									})
									
								}
							}

							// step 2: get all the numbers to produce the desired result
							function generateFizzBuzz(fizz, buzz, stop) {
								let array = []

								for (let i = 1; i <= stop; i++) {
									if (i % fizz == 0 && i % buzz == 0) {
										array.push('FizzBuzz')
									} else if (i % fizz == 0) {
										array.push('Fizz')
									} else if (i % buzz == 0) {
										array.push('Buzz')
									} else if (i % 2 == 0) {
										array.push('Even')
									} else {
										array.push(i)
									}
								}

								return array
							}

							// step 3: display the result on the page
							function displayFizzBuzz(values) {
								let resultsDiv = document.getElementById('fizzBuzzResults')
								resultsDiv.innerHTML = ''

								for (let index = 0; index < values.length; index++) {
									let value = values[index]
									let htmlForValue = `<div class="col ${value}">${value}</div>`

									resultsDiv.innerHTML += htmlForValue
								}
							}
                        
                    

Let's discuss the code responsible for generating the outcome of the FizzBuzz coding challenge.

Each function has its own task

getValues()

The getValues function, as you can see, is designed to retrieve the values of the input fields of a form, namely: fizzString, buzzString, and stopString using for example document.getElementById('fizzValue').value, convert them to numbers: fizzNumber, buzzNumber and stopNumber using the build in method parseInt, then call other functions like generateFizzBuzz and displayFizzBuzz to generate and display results related to FizzBuzz logic. And in order to ensure the validity of the fields or at least what precisely we must obtain from these fields by of course using the sweetalert2 library.

generateFizzBuzz()

The generateFizzBuzz function takes into account three parameters, a fizz value, a buzz value, and the stop value which represents the number of iterations. To store the result we create an empty array, then we continue with the logic of our application with a for loop. From our point of view, we know that we must start from 1, so i in this case is set to 1, then if the numbers that i represents are divisible by fizz, and at the same time this same number is divisible by buzz we display FizzBuzz instead of this number, if the number is only divisible by fizz we display Fizz instead of the number, and finally, if the number is only divisible by buzz we display Buzz instead of the number. All this using an if statement.

Finally, all we have to do is return our array which contains all the values. Note that I gave myself a little freedom by adding another if for the fun, by adding Even for all the numbers that are divisible by 2 😜.

When a function is invoked, the code inside the function is executed, and the return statement specifies the value that the function will produce as its result.

displayFizzBuzz()

The displayFizzBuzz function will allow us to display the result of our solution on the page using our document by calling the fizzBuzzResult id which represents the location or element in which we will have to insert the result, then we reset this same element for other displays. The 'for' loop is used to iterate over a 'values' array, and generate HTML content corresponding to each element in the array. On each iteration of the loop, the current value in the 'values' array is stored in the 'value' variable. Then we create a <div> tag - using what we call a template literals or template strings (delimited with backtick (`) characters) - with a CSS class based on the value (represented by ${value}) also displaying the value inside the tag. And finally, the generated HTML is added to the content of the HTML element referenced by 'resultsDiv' which accumulates on each iteration of the loop.

That's kind of cool, right? 😎