The Code


//display a message to the user
function getValues(){
    //declare the required variables
    let startValue = 0;
    let endValue = 100;
    //get the numbers from the UI
    startValue=document.getElementById("startValue").value;
    endValue=document.getElementById("endValue").value;
    //Validate our numbers
    startValue = parseInt(startValue);
    endValue = parseInt(endValue);

    //check to see both values are numbers
    if(Number.isInteger(startValue) && Number.isInteger(endValue)){
        //both numbers are integers

        //
    let numbers = generateNumbers(startValue, endValue);
    displayNumbers(numbers);
    }else{
        //one or more are not
        Swal.fire("Please enter only integers 1, 2, 3, etc. NOT 1.5, 2/3, Cat");
    }


}
//generate numbers from startValue to endValue
function generateNumbers(sValue, eValue){
    //0,1,2,3, etc
    let numbers = [];
    //Loop over the numbers until we hit the end value
    for (let index = sValue; index <= eValue; index++) {

        //Add numbers to array
        numbers.push(index);

    }
    return numbers;
}
//displays the numbers
function displayNumbers(numbers){
    //0 first index value
    //99 last index value
    //length = 100

    let endIndex = numbers.length;
    let tableBody = document.getElementById("results");
    //Clear out previous results
    tableBody.innerHTML = "";
    for (let index = 0; index < endIndex; index++) {
        let tableRow = "";
        //get the actual number
        let number = numbers[index];

        if(number % 2 == 0){
            //the number is even
            tableRow = `<tr><td class="evenDisplay">${number}</td></tr>`
        } else{
            //the number is odd
            tableRow = `<tr><td>${number}</td></tr>`
        }


        tableBody.innerHTML += tableRow;

    }
}
JavaScript

The Code is structured in three functions

GetValues

GetValues is the controller function. It pulls the user numbers from the UI and converts them to integers, if able. If the values cannot be parsed, an alert pops up to make sure only integer values are entered.

If both values entered are integers, the functions generateNumbers and displayBeji are run.

GenerateNumbers

GenerateNumbers is the logic function. It takes in the user values as start and end values. It initializes an empty array into a numbers variable.

A for loop runs that pushes each index value into the numbers array.

generateNumbers returns the numbers array.

DisplayBenji
DisplayBenji is the display function. It takes in the numbers array. It initializes a tableBody variable that stores the information in the tbody tag. The tableBody innerHTML is set as an empty string to clear the previous result.

A for loop looping through the numbers array initializes a number variable that stores the value of each numbers array element. It checks if the current element is even using an if-else statement.

If the value, evaluted using a modulus, is even, an evenDisplay class is added bolding and coloring the value printed. If the value is odd no class is added. At the end of the loop, a new tableRow is appended to the tableBody.