The Code

// get the user input from the page
// Controller Function
function getValues() {

    // get values from the page
    let startValue = document.getElementById('startValue').value;
    let endValue = document.getElementById('endValue').value;

    // parse our inputs as numbers
    startValue = parseInt(startValue);
    endValue = parseInt(endValue);

    // verify our inputs ARE numbers

    if (Number.isInteger(startValue) && Number.isInteger(endValue))
    {
    // if they are, then generate numbers
        let numbersArray = generateNumbers(startValue, endValue)

    // then display on the page
        displayNumbers(numbersArray);
    } else {
        // if they are not, tell our user
        Swal.fire(
            {
                icon: 'error',
                title: 'Oops!',
                text: 'Only integers are allowed for Range Maker!'
            }
        );
    }



}

// generate our numbers
// Logic Function
function generateNumbers(start, end) {

    let numbers = [];

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

    return numbers;
}

// display them on the page
// View Function
function displayNumbers(numbersArray) {
    let tableBody = document.getElementById('results');

    let tableHtml = '';

    for(let i = 0; i < numbersArray.length; i++) {
        let value = numbersArray[i];
        let className = '';

        if(value % 2 == 0) {
            className = 'even';
        } else {
            className = 'odd';
        }

        if (i % 5 == 0) {
            tableHtml += '';
        }

        let tableRow = `${value}`;


        tableHtml = tableHtml + tableRow;

        if ((i + 1) % 5 == 0) {
            tableHtml += '';
        }
    }

    tableBody.innerHTML = tableHtml;
}

The code is structured in mutiple functions that utilizes for loops and boolean logic to complete the coding challenge.

`function getValues()`

This is the main function and is called when a user submits values for a range of numbers on the page. It uses the document.getElementById() method to retrieve the start and end values that the user has submitted. These values are then parsed as ints via the parseInt() method and are checked to ensure they are ints using the Number.isInteger(). If the inputs are numbers the generateNumbers function is called and passed to start and end values, if the inputs are not ints then a Sweet Alert error message is thrown.

`function generateNumbers()`

This function creates an empty array and then uses a for loop to generate a sequence of numbers starting from the start value and ending at the end value. Each number is added to the array using the push() method, and the resulting array is returned to the calling function.

`function displayNumbers()`

This function takes the array of numbers generated by generateNumbers() and creates an HTML table to display them. The function starts by getting the element with an id of "results" on the page and storing it in a variable. It then uses a for loop to iterate through each number in the array, classifies each number as odd or even using a conditional statement, and then creates an HTML table cell (td) with a class name of either "even" or "odd". If the index of the number is divisible by 5, the function creates a new HTML table row (tr). The resulting HTML is stored in a variable, and finally, the HTML for the entire table is inserted into the "results" element using the innerHTML property.