function getNumbers() {

    let startValue = document.getElementById("startValue").value;
    let endValue = document.getElementById("endValue").value;
    let fizzValue = document.getElementById("fizzValue").value;
    let buzzValue = document.getElementById("buzzValue").value;

    let newStart = parseInt(startValue);
    let newEnd = parseInt(endValue);
    let newFizz = parseInt(fizzValue);
    let newBuzz = parseInt(buzzValue);

    if (isNaN(newStart) || isNaN(newEnd || isNaN(newFizz) || isNaN(newBuzz))) {
    alert("Please check to see if your entries are numbers.");
    return;
    }

    else if (newStart > newEnd) {
    alert("End number must be great than start number.");
    return;
    }

    else if (newStart > 10000 || newStart < -10000) { 
        alert("For the sake of your processer please limit the range to 20,000 or less") }    
    }
    let newOutputArray = getOutputArray(newStart, newEnd, fizzValue, buzzValue);

    addOutputStringtoArray(newOutputArray)
}
                        
                    

getNumbers

Requirements:

• Access the webpage and get the values from the inputs
• Checks for issues
• verify entries are numbers
• parse numbers to ints
• verify entries are numbers

Variables:

• startValue => values to start the count
• endValue => values where the count ends
• fizzValue => divisor that provides Fizz
• buzzValue => divisor that provides Buzz

                        
function getOutputArray(startValue, endValue, fizzValue, buzzValue) {

    let outputArray = [];
        for (let number = startValue; number <= endValue; number++) { 
            
            let outputString="" ; 
            
            if (number % fizzValue==0 && number % buzzValue==0) { 
                outputString +="FizzBuzz" ;
                outputArray.push(outputString); 
            } 
            //Adds Fizz if test passes 
            else if (number % fizzValue==0) { 
                outputString +="Fizz"; 
                outputArray.push(outputString); 
            } 
            //Adds Buzz if test passes 
            else if (number % buzzValue==0) { 
                outputString+="Buzz" ; 
                outputArray.push(outputString); 
            } 
            //Returns number if the outputString is empty 
            else {
                outputString=`${number}`;    
                outputArray.push(outputString); 
            } 
        } 
    return outputArray; 
}
                        
                    

getOutputArray

Requirements:

• Calculate and identifies the contents and them put into array
• Check:
• Is it just a number?
• Is the number Fizz
• Is the number Buzz
• Is the number FizzBuzz

Variables:

• startValue => values to start the count
• endValue => values where the count ends
• fizzValue => divisor that provides Fizz
• buzzValue => divisor that provides Buzz

                        
function addOutputStringtoArray(newOutputArray) {

    let tableBody = document.getElementById("output");

    let templateRow = document.getElementById("fizzBuzzTemplate");

    tableBody.innerHTML = "";

    for (let i = 0; i <= newOutputArray.length; i +=5) { 
        
        let tableRow=document.importNode(templateRow.content, true); 
        
        let rowCols=tableRow.querySelectorAll("td"); 
        rowCols[0].classList.add(newOutputArray[i]);
        rowCols[0].textContent=newOutputArray[i]; 

        rowCols[1].classList.add(newOutputArray[i + 1]);
        rowCols[1].textContent=newOutputArray[i + 1]; 

        rowCols[2].classList.add(newOutputArray[i + 2]);
        rowCols[2].textContent=newOutputArray[i + 2]; 

        rowCols[3].classList.add(newOutputArray[i + 3]);
        rowCols[3].textContent=newOutputArray[i + 3]; 

        rowCols[4].classList.add(newOutputArray[i + 4]);
        rowCols[4].textContent=newOutputArray[i + 4]; 
        
        tableBody.appendChild(tableRow); 
    } 
}
                        
                    

addOutputStringtoArray

Requirements:

• Create the new HTML Table:
• Establish the template row
• Imports template row
• Add colours and inserts the TDs into the array