//get values from the UI
//this is the start or controller function
function getValues() {
    //get values from page
    let startValue = document.getElementById("startValue").value;
    let endValue = document.getElementById("endValue").value;
    
    //need to validate the input
    //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 start value to the end value
//this is our logic function(s)
function generateNumbers(sValue, eValue) {

    let numbers = [];

    
    //get all numbers from start to end
    for( let index = sValue; index <= eValue; index++) {

        //this will execute in a loop until index= eValue
        numbers.push(index);
    }
    return numbers;
}

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

    let templateRows = "";

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

        let number = numbers[index];

        if (number % 2 == 0) {
            className = "even";
        } else {
            className = "odd";
        }

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

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


                
                

getValues Function

This function gets the starting and end values from the HTML page and then parses them into integers. Then if the values are integers, the function generateNumbers is called. If the values aren't integers then an alert will pop up.

generateNumbers Function

The numbers variable is equal to an empty array. The for loop sets index to the first param of sValue, then if index <= evalue, then index++ and the numbers var will push index.

displayNumbers Function

This function has a param of numbers. It sets the templateRows var equal to an empty string. The for loop then sets index equal to 0, and if index is < numbers.length, then index++. if thats true then set the var className = the string even and let the number var equal numbers[index]. And If number modulus 2 is == to 0 then className = even else className = odd. templateRows += the number.