// Get the numbers from our form inputs
// ENTRY POINT
// CONTROLLER Function
function getValues() {
    let fizzNumber = document.getElementById('fizzValue').value;
    let buzzNumber = document.getElementById('buzzValue').value;
    let stopNumber = document.getElementById('stopValue').value;

    fizzNumber = Number(fizzNumber);
    buzzNumber = Number(buzzNumber);
    stopNumber = Number(stopNumber);

    // make sure there are numbers
    if (isNaN(fizzNumber) == true || isNaN(buzzNumber) == true || isNaN(stopNumber) == true) {

        Swal.fire({
            title: 'Oops!',
            text: 'FIZZ BUZZ only works with numbers.',
            icon: 'error',
            backdrop: 'false'
        });
        // make sure the stop is greater than fizz and buzz
    } else if (fizzNumber > stopNumber || buzzNumber > stopNumber) {
        Swal.fire({
            title: 'Oops!',
            text: 'Please make sure the Fizz and Buzz value are smaller than the Stop value',
            icon: 'error',
            backdrop: false
        });
    } else {
        let numberArray = generateFizzBuzz(fizzNumber, buzzNumber, stopNumber);

            displayFizzBuzz(numberArray);
    }






}


// Buisness logic - creates number in the input range
// Data Model
function generateFizzBuzz(Fizz, Buzz, Stop) {

    let range = [];

    for (let number = 1; number <= Stop; number++) {

        let results = "";

        if (number % Fizz == 0 ) results += 'Fizz';
        if (number % Buzz == 0) results += 'Buzz';
        if (number % Fizz, Buzz == 0) results += 'Fizz Buzz'

        range.push(results || number);

    }

    return range;

}


// View Function
//Puts the numbers on the page 
function displayFizzBuzz(range) {

    let tableHtml = '';

    for (let index = 0; index < range.length; index++) {

        let currentNumber = range[index];

        let className = '';

        if (currentNumber == 'Fizz') {
            className = 'Fizz';
        } else if (currentNumber == 'Buzz') {
            className ='Buzz'
        } else if (currentNumber == 'FizzBuzz' ) {
            className = 'fizzBuzz'
        }


        let tableRowHtml = `<tr><td class="${className}">${currentNumber}</td></tr>`;

        tableHtml = tableHtml + tableRowHtml;

    }

    document.getElementById('results').innerHTML = tableHtml;

}
                    
                

The Code is structured in three funtions

getValues

This purpose if this function is to retrieve input values and then validates these values to ensure they are integers and that they meet certain criteria. If the inputs are valid, it proceeds to call the generateFizzBuzz() fumction, and the view function, displayFizzBuzz(), to display the results. Additionally, it displays error messages using the Swal library when necessary

generateFizzBuzz

This function handles the generating of the FizzBuzz sequence. Firsy it creates an array of numbers based on the input parameters Fizz, Buzz, and Stop. For each number in the specified range, it determines whether it should be replaced with "Fizz," "Buzz," or "FizzBuzz" according to certain conditions. The results are stored in the range array, which is then returned.

displayFizzBuzz

This function is responsible for displaying the FizzBuzz results on the web page. It generates table for displaying the FizzBuzz and it assigns specific CSS classes to elements based on their content (e.g., 'Fizz,' 'Buzz,' or 'FizzBuzz') to control the styling.