The Code

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

    // get values from page
    let startValue = parseInt(document.getElementById('startValue').value);
    let endValue = parseInt(document.getElementById('endValue').value);
    // parse inputs as numbers
    // startValue = parseInt(startValue);
    // endValue = parseInt(endValue);

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

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

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

    let numbers = [];

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

    return numbers;
}

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

    for(let i = 0; i < array.length; i++) {
        let value = array[i];
        // let className = "";

        let className = value % 2 == 0 ? "even" : "odd";

        /* if (value % 2 == 0) {
            className = "even";
        } else {
            className = "odd";
        } */
        
        if (i % 5 == 0) {
            tableHTML += "<tr>"
        }

        let tableRow = `<td class="${className}">${value}</td>`;
        
        tableHTML += tableRow; 
    
        if ((i + 1) % 5 == 0) {
            tableHTML += "</tr>"
        }

    }

    tableBody.innerHTML = tableHTML; 
}
                    
                

This code is structured in three functions

getValues()

This function grabs the two inputs from our HTML document, and converts them into values. It then uses those values to create an array of those numbers and all in between using the generateNumbers() function. After that, this function calls the displayNumbers() function to display the complete array of numbers with even numbers and odd numbers displayed in a specific manner.

generateNumbers()

This function is used to create all of the values in the array, and to do that I gave it two parameters: start, and end. These make it possible for us to use our startValue and endValue variables to create the array of values from start to end. To do that, I made a for loop that set i equal to the start parameter, and had it increase by 1 until it reached the end parameter. Inside of the loop is the array "numbers" and it is using a function called push() to add i into the array. Finally, we use return numbers to send the final array back to the getValues function.

displayNumbers()

The first thing displayNumbers() does is use the tableBody variable to grab our ID 'results' from the HTML page. This allows us to add new rows and data to the tableBody on the HTML. We will come back to tableBody at the end of the function, but for now we will create another variable called tableHTML that will be an empty string. Next we'll run a for loop for the entire length of the array, and inside the loop we'll set value to the current index of the array for each loop. So, it'll start at index 0 then go to 1, 2, 3, etc... Next, we'll set an if statement to a variable that will run for every number that goes through the loop, and it will divide the value by 2. If the remainder is 0 that number is even and it will be assigned the className of 'even', and if the condition comes out false, the value will be assigned the className of 'odd'. The next bit of code is how we structure the table rows. First, the if statement that divides by 5 to see if the remainder is 0 is part of how we limit our rows to 5 numbers. So, if the i value divided by 5 equals 0 we add a <tr> and start a new row, and the same for the closing </tr>. Although, for the closing tag we need i + 1 since i starts at 0. So, when i gets to 4 it will have gone 5 places. Now that we have the rows out of the way, let's talk about the tableRow variable. We use a string template literal to put the string we want in the HTML that declares that this is table data it holds a class of 'even' or 'odd', whichever it got from the if statement above, and it holds a value. The value is the number at array[i]. This table row and the <tr> tags if necessary get added to tableHTML every time through the loop. We then use tableBody.innerHTML to take the values we just inputted to tableHTML and output them on the page.