// === Get the values from webpage === //
// start or controller function
function getValues(){
    // get values from the page
    let startValue = document.getElementById("startValue").value;
    let endValue = document.getElementById("endValue").value;

    // this step ensures the values entered are converted to integers; decimals are truncated
    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 startValue to the endValue === //
// logic function(s)
function generateNumbers(startValue, endValue){
    // numbers generated will go in an array
    let numbers = [];

    for(let i = startValue; i <= endValue; i++){
        numbers.push(i);
    }
    // return the new array full of numbers from startValue to endValue
    return numbers;
}

// === Display the numbers, and mark the evens bold === //
// display or view functions
function displayNumbers(numbers){

    let templateRows = "";

    for (let i = 0; i < numbers.length; i++) {

        let className = "even";

        // pull out each individual number each time we loop through the array
        let number = numbers[i];

        // generate a new table row that holds that individual number
        if (number % 2 == 0){
            // if the number is divisible by 2 (if it's even), then keep the class as even
            className = "even";
        } else {
            // if the number is odd, then change the class to odd
            className = "odd";
        }
        // This does not render correctly with Prism; see the source code
        templateRows += `${number}`;
    }

    document.getElementById("results").innerHTML = templateRows;
}

Here are some brief explanations of the functions used in this project.

getValues()

 The getValues function is our starting point for the application. First, we take in the values from our inputs in the webpage, and store them inside appropriately named variables. Next, we make sure to check to ensure the values entered are actually integers by using the built-in parseInt function. This function attempts to convert any strings entered to integers. We then check for the success of this parsing with an if/else statement.

 Inside the if statement we check for two conditions: is the startValue variable an integer AND is the endValue variable an integer. If both of these conditions return true, then we move on with the overall process. If either of the tested conditions return false, then we alert the user to remind them to enter only an integer value into the fields. Once we have the true conditions met, we create a new variable named numbers, and set it equal to whatever our function generateNumbers returns when we pass in the startValue and endValue parameters.

 The function then takes the numbers variable (it will be an array), and calls the final function displayNumbers while passing this numbers array in as parameter.

generateNumbers()

 This function starts by creating an empty array variable called numbers. Using two parameters, startValue and endValue, from the getValues function we create a for loop. This for loop starts with the startValue value, and loops over every number up to and including the endValue. During each loop we are simply adding that number to our numbers array using the push function. After each number in our range has been added to the numbers array, we return the numbers array back to the getValues function.

displayNumbers()

 This function is where the real magic happens. The previously acquired numbers array is passed in as a parameter, and provides us with an array of numbers we want to display in our html table dynamically. The ultimate goal of this function is to have a string of html table rows to insert into our results table on-screen.

 We start by creating a variable called templateRows, which is an empty string to start. We then start another for loop. This loop is designed to run as many times as there are elements in the numbers array, which is achieved using the array.length function when setting up the for loop. We create a variable of className to allow us to apply styling to the html elements we are about to create. Inside each loop we want to look at each individual number, and we do this with the number variable being equivalent to the value at the array's current index location. We then test that number to see if it is even or odd using the modulo (%) operator. If the number is evenly divisible by two, then number % 2 == 0, and we add the "even" class to our html elements. If the number is not divisible by two, then we add the "odd" class to our html element. At the end of the loop we simply append a string containing our table row tags, the proper class designation, and the value of the number variable.

 The last line in our code grabs the element in our html with the id "results," in our case our table, and sets its the html inside that element to the string created by our for loop. This html creates the table you see on screen.