The Code

// Get User Input from Page
// Controller Function/ Entry Point

function getValues()
{
    //Get Values
    let startValue = document.getElementById('startValue').value
    let endValue = document.getElementById('endValue').value


    //Parse inputs as numbers
    startValue = parseInt(startValue);
    endValue = parseInt(endValue);


        //  Verify our inputs are numbers
        if (Number.isInteger(startValue) && Number.isInteger(endValue))
        {
            // Generate the Numbahs
            let numbersArray = generateNumbers(startValue, endValue);

            // Display the numbahs
            displayNumbers(numbersArray);

        }
        else
        {
            // If not, call them a goof.
            Swal.fire
            ({
                    icon: 'error',
                    title: 'Whoops!',
                    text: "Dubloons are numbers only, you goof!"
            })
        }
}


// Generate numbers
// Logic functions
function generateNumbers(start, end)
{
    let numbers = [];

        for (let i = start; i <= end; i++)
        {
            numbers.push(i);
        }

    return numbers;
}


//Display them on the page
//  View Function - Make it show up.
function displayNumbers(numbersArray)
{
    let tableBody = document.getElementById('dubloonCount');
    let tableHTML = "";

        for (let i = 0; i < numbersArray.length; i++)
        {
            let value = numbersArray[i];
            let className = '';
            value % 2 == 0 ? className = 'even' : className = 'odd';

                if (i % 5 == 0)
                {
                    tableHTML += '<tr>';
                }


            tableHTML += `<td class="${className}">${value}</td>`

                if ((i + 1) % 5 == 0)
                {
                    tableHTML += '</tr>';
                }
        }

    tableBody.innerHTML = tableHTML;
}

The code is structured in three functions. Called functions will be detailed in their own sections. Click a headline() to scroll to that section of the code. And click the function name within the code to scroll to that write up section.

`getValues()`

This function grabs the input values from our startValue and endValue elements. It then parses those strings into integers. Following that, we verify the inputs are numbers as a quick check. If they are, we call generateNumbers() and then displayNumbers(). If they are not numbers we use a sweet alert to call them a goof, as pirates do.

`generateNumbers()`

This function generates an array starting with the startValue number and counting up until it reaches the endValue number. It then returns numbers.

`displayNumbers()`

This function is used to display the numbers on the webpage for the user. First it is passed the argument of numbersarray. It grabs the id of the table where we want to display them. Then a blank string is assigned to tableHTML. Next, our for loop runs through a number of ternary and if statements to build the html.

The ternary statement value % 2 == 0 ? className = 'even' : className = 'odd' assigns the value of 'even' if the value is divisible by 2 with 0 remainder, or 'odd' if it has a remainder. Then we get into the if statements. If the value of i divided by 5 has a remainder of 0 then it attaches a <tr> to tableHTML. Then tableHTML adds what its current value is as a string template literal. Following that we look into the future a bit. If the value of i + 1 is divisble by 5 it adds a </tr> to the tableHTML.

Finally, it places the created element into the HTML and it is displayed for the user on the page.

returnToTop()