The Code

JavaScript

    //start or controller function(get the values from the page)
    function getValues(){
        //get values from the page
        let startValue = document.getElementById("startValue").value;    
        let endValue = document.getElementById("endValue").value;
    
        //parse into Integers
        startValue = parseInt(startValue);
        endValue = parseInt(endValue);   
    
        if(Number.isInteger(startValue) && Number.isInteger(endValue)){
            //call generateNumbers()
            let numbers = generateNumbers(startValue, endValue);
            //call displayNumbers
            displayNumbers(numbers);
        }
        else{
            alert("YOU MUST ENTER INTEGERS!");
        }
    }
    //generate numbers from the start value to the end value
    //logic function(s)
    function generateNumbers(startValue, endValue){
        let numbers = [];
        for (let i = startValue; i <= endValue; i++){
            //this will execute in a loop until i = endValue
            numbers.push(i);
        }
        return numbers;
    }
    //display the numbers, and mark the EVEN numbers BOLD
    //display or view function(s)
    function displayNumbers(numbers){
        let templateRows = "";
        for (let i = 0; i < numbers.length; i++) {
            let number = numbers[i];
            
            if(number % 2 == 0){
                className = "even";
            }else
            {
                className = "odd";
            }
            templateRows += `<tr><td class="${className}">${number}</td></tr>`;
        }
        document.getElementById("results").innerHTML = templateRows;
    }
    function resetTable(){
        let templateRows = "";
        document.getElementById("results").innerHTML = templateRows;
    }
    

This code displays without error thanks to: https://tohtml.com

An explanation:

The code is structured in three functions:

getValues()

getValues gets the user input from the page in the form of strings by utilizing getElementById to pull the values from the input fields.

Then we apply parseInt to the strings to get Integers to use for our purposes.

The if statement validates that both inputs were indeed Integers and only allows use to proceed if that is the case. Otherwise, we get an error message telling us to fix the input(s).

generateNumbers()

generateNumbers takes in two parameters: startValue and endValue.

We create an array variable called numbers to use in a for loop.

The array begins at index[0] which contains the value of startValue which we will take and add 1 to, then will push the new number into the next index slot and repeat this process until we reach our endValue.

Then we will return (send back out to the parent program) the newest version of numbers containing each Integer we processed.

displayNumbers()

displayNumbers accepts the parameter numbers passed to it.
This is the array that holds the values between startValue and endValue.

We declare an empty string called templateRows which will be programmatically injected into the HTML as part of the table.
The upcoming for loop will append a new value to templateRows based on whether the integer it is analyzing has a remainder when divided by 2.

If there is no remainder, then 2 divides evenly into the Integer of the moment and must be even, and in that case, className will be assigned "even"; alternatively, if there is a remainder, then the number was odd and so we will assign "odd" to the string className()

Now here's where we append templateRows with the className for this iteration trough the loop:
templateRows =
templateRows
+ table-row-start-tag
+ table-data-start-tag
+ call the class of className
+ [number we are processing]
+ table-data-close-tag
+ table-row-close-tag

The code is completed once the table on the APP page is filled with rows from the string templateRows.

resetTable()

resetTable is called by the Reset button, and simply assigns an empty string to templateRows, thus giving the table nothing to display.