//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)

  //check that the values are integers
  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 VALUES FROM THE START VALUE TO 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 i = endValue
    numbers.push(i)
  }

  return numbers
}

//DISPLAY VALUES AND MARK THE EVEN NUMBERS BOLD WHEN BUTTON PRESSED//
//display or view function
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 not render correctly with prismjs, see the source code
    templateRows += `${number}`
  }

  document.getElementById('results').innerHTML = templateRows
}

            

The code is structured in three functions to keep everything nice and readable. No spaghetti code!

Get Values

The first function is a controller/starter function. I first get the initial values from the users inputs in the document/HTML (button event listener seperated into the document/HTML), then parse text types that may not be integers (the zero was initially showing as text/string) and check if that was successful using an if statement inside the function. If successful the generateNumbers function is called along with the displayNumbers function, else an alert is shown to the user.

Generate Numbers

The second function generates the values from start to end using the inputted values by the user. It does this by retrieving parameters from the numbers variable defined in the getValues function above it (start and end value). I then execute a for loop to get all the numbers from start to end and push them to the numbers array - not to be confused with the numbers variable in getValues(these are different due to block scoping). I then return the numbers to give getValues access to the newly created numbers array.

Display Numbers

The final function is used to display and mark the even numbers bold. It is called from the getValues function and given the numbers array (retrieved from generateNumbers orignally) as a parameter, using this to loop through the length of the array with another for loop. The index (each individual integer in the array) is then added to the document/HTML, adding to the document/HTML using innerHTML and a template literal ( added to templateRows). Bold font is added to even numbers using an if statement, checking if numbers are divisible by 2, with class names added to the template literal to go into the document/HTML. Even and odd class names are given specific styling in the main site css.