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

    // We need to validate our input
    // parse into Integers
    startValue = parseInt(startValue);
    endValue = parseInt(endValue);

    if (Number.isInteger(startValue) && Number.isInteger(endValue) &&
        startValue >= 0 && startValue < 100 && endValue > 0 && endValue <= 100) {
        // call generateNumbers
        let numbers = generateNumbers(startValue, endValue);
        // call displayNumbers
        displayNumbers(numbers);

    } else {
        alert("You must enter integers between 0 and 100.");
    }
}

// generate numbers from the startvalue to the end value
// logic function(s)
function generateNumbers(startValue, endValue) {

    let numbers = [];


    // we want to get all numbers from start to end

    for (let i = startValue; i <= endValue; i++) {
        // this will execute in a loop until index = endValue
        numbers.push(i);
    }

    return numbers;
}

// display numbers and mark the even numbers bold
// display or view functions
function displayNumbers(numbers) {

    let className = "even";
    let templateRows = "";
    for (let index = 0; index < numbers.length; index++) {

        let number = numbers[index];
        if (number % 2 == 0) {
            className = "even";
        } else {
            className = "odd";
        }

        // This does not render correctly with Prism see the source
        templateRows += `${number}`;
    }

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

}
                    
                    

The Code is structured in three functions.

getValues()

getValues is a controller function that gets the starting and ending values from the user and ensures they fit within the parameters of the program (within 1 and 100). If the values are incorrect, a message is sent to the user to reenter. Otherwise, the values are passed to generateNumbers(). Once they are generated, we call displayNumbers with those values.

generateNumbers()

generateNumbers is a logic function that takes the starting and ending value parameters and fills an array with those values. It then returns the array.

displayNumbers()

displayNumbers is a display function that takes the even numbers from the array returned by generateNumbers() and writes them to a string called templateRows, and sends that string to a table called "results" to be displayed on the app page.