The Code

 
                     
// from site.js

// Get the numbers from the page
function getValues(){

    // Create the variables
    let fizzValue = document.getElementById('fizzValue').value;
    let buzzValue = document.getElementById('buzzValue').value;

    // convert text to integers
    fizzValue = parseInt(fizzValue);
    buzzValue = parseInt(buzzValue);

    // Validate the user input
    if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)){
        // send values to generate list of numbers
        let fbArray =  generateFizzBuzz(fizzValue, buzzValue);
        // display the list of numbers
        displayFizzBuzz(fbArray);
    }
    else
    {
        // display a SweetAlert if validation fails
        Swal.fire(
            {
                icon: 'error',
                backdrop: false,
                title: 'Oops',
                text: 'Please enter valid numbers only.'
            });
    } 
}

The code for this FizzBuzz Challenge is structured into three functions

getValues main focus is on getting the values from the inputs. The secondary focus for the function is to orchestrate the order in which the application is supposed to run.

There is a third focus for this class as well which is to validate tthe users input, but I will go into the details of the validations later.

In this function, first we get the values the user inputs in the fields. The values are then converted from text to an integer via the parseInt(fizzValue) and parseInt(buzzValue) methods. After validation is complete, these values are then sent to the generateFizzBuzz function.

 
                             
// generate the list of numbers
function generateFizzBuzz(fizz, buzz){

    // create variable for the list of numbers
    numbers = [];

    // create a for loop to add number to the list
    for (let n = 1; n <= 100; n++){
        // check to see if condition is met
        if(n % fizz == 0 && n % buzz == 0){
            numbers.push('FizzBuzz')
        }
        if(n % fizz == 0){
            numbers.push('Fizz');
        }
        else if (n % buzz == 0){
            numbers.push('Buzz');
        }
        else {
            numbers.push(n);        
        }
    }
    // return the array
    return numbers;
}

In this function, the values are received and are ran through a for loop.This loop runs through numbers 1 - 100. Each time the loop runs, it evaluates each number to see if the condition is met. Then it pushes the condition result into the array, so if the number is divisible by three, "Fizz" is pushed into the array. This array of numbers is returned and is then sent to the displayFizzBuzz function.

 
                             
// display the array generated in generateFizzBuzz
function displayFizzBuzz(numbers){
    
    let resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = '';
    
    for (let index = 0; index < numbers.length; index++){
        
        
        let arrayItem = numbers[index];
        let newDiv = document.createElement('div'); 
        newDiv.classList.add('col'); 
        newDiv.classList.add(arrayItem) 

        newDiv.textContent = arrayItem; 
        
        resultsDiv.appendChild(newDiv);
    }
}

In this display function, a loop is ran. Within the JavaScript, a div is created along with the classes needed and is appended to the established div in the HTML/p>

 
                             
// Validate the user input
if (Number.isInteger(fizzValue) && Number.isInteger(buzzValue)){
    // send values to generate list of numbers
    let fbArray =  generateFizzBuzz(fizzValue, buzzValue);
    // display the list of numbers
    displayFizzBuzz(fbArray);
}
else
{
    // display a SweetAlert if validation fails
    Swal.fire(
        {
            icon: 'error',
            backdrop: false,
            title: 'Oops',
            text: 'Please enter valid numbers only.'
        });
}

The validations that are done in the getValues function are there to ensure the application runs as it should. It checks to make sure that the value is a number.

If the validation should fail, a SweetAlert popup window will appear with information to the user on what the error is and how to correct it.