//get the values from the page
//starts 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 the startValue to the endValue
//logic function(s)
function generateNumbers(sValue, eValue){

   let numbers =[];
   //we want to get to 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 even numbers bold
//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";
      }
      templateRows += `${number}`;
   }
   document.getElementById("results").innerHTML = templateRows;
}

The code is structured in three functions

getValues

getValues accepts(gets) the user input from the page. It utilizes getElementById to pull the values from the page. It passes those values to the generateNumbers function. This function generateNumbers returns an array of values and passes that array to the displayNumbers function.

generateNumbers

generateNumbers takes into two parameters startValue and endValue. We create a variable (numbers) that holds an array. A for loop is used to generate all of the numbers between startValue and endValue.

displayNumbers

displayNumbers takes in one parameter numbers. The variable numbers is an array that holds values between startValue and endValue. We create a variable (classNumber) that holds the name of a CSS class that we will use to bold the numbers. We create a variable templateRows that will hold the HTML we will write to the page.

A for loop is used to check all of the numbers to see if they are even or odd. The remainder operator(%) is used to see if the number is divisable by two. If it returns zero, then it is even. If not (else), then it is odd. The correct className is injected into the html row for display. Each interaction of the loop adds to the templateRows variable. At the end of the loop, the resulting HTML rows are written to the page.