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;
                                        
                                    }
                                }
                            
                        

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.