// get the vales 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)) {
        // we call generateNumbers
        let numbers = generateNumbers(startValue,endValue);
         // we call displayNumbers
        displayNumbers(numbers);
    } else {
        alert("You must enter integers");
    }  
}

// generate numbers from startValue to the endValue
// logic function
function generateNumbers(sValue, eValue){

    let numbers = [];

    for (let index = sValue; index <= eValue; index++) {
        numbers.push(index);    
    }
    
    return numbers;
}

// display the numbers and the even numbers are bold.
// display or view function
function displayNumbers(numbers){
    let templateRows = "";
    for (let index = 0; index < numbers.length; index++) {
        let number = numbers[index];
        if (number % 2 == 0) {
            // Prism doesn't render template literals correctly see source code.
            templateRows += `${number}`;  
        } else {
          // Prism doesn't render template literals correctly see source code.
           templateRows += `${number}`; 
        }
    }
    
    document.getElementById("results").innerHTML = templateRows;

}
                
                

EVANA is structured using three functions. getValues(), generateNumbers(), and displayNumbers().

getValues()

This function accesses the Document Object Model or DOM and gets the start and end values entered by the user. The function then validates what the user entered as being valid integers. All the other functions are called from inside this function.

generateNumbers()

This function loops using the start and end numbers to control the loop and adds the numbers to an array. It then returns the array.

displayNumbers()

This function takes the array of numbers and inserts them into a table in the DOM. It also bolds all the even numbers.