The Code for BOLD

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

                  // 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 startValue to the endValue
                // logic function(s)
                function generateNumbers(startValue, endValue) {
                  let numbers = [];

                  // get all numbers from start to end
                  for (let index = startValue; index <= endValue; index++) {
                    // this will execute in a loop until index = endValue
                    numbers.push(index);
                  }

                  return numbers;
                }

                // display the numbers and mark the even numbers bold
                // display/view function
                function displayNumbers(numbers) {
                  let templateRows = "";
                  for (let index = 0; index < numbers.length; index++) {
                    let className = "";
                    let number = numbers[index];

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

                    templateRows += `<tr><td class="${className}" >${number}</td></tr>
                  }

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

              
            

The code is structured into three functions.

getValues

The getValues function is responsible for getting the values from the page and validating that the values are integers. If the values are integers the other two functions will be called. This function gets called when the button is clicked.

generateNumbers

The generateNumbers function is responsible for determining all of the numbers needed and returning the numbers as an array.

displayNumbers

The displayNumbers function is responsible for going through each number in the array, determining if the number is even or odd, and then inserting a table row with the number and the appropriate class name.