The Code

      
        //Get the user input from the page
        function GetValues() {
          //Get the values from the page
          let startValue = document.getElementById('startValue').value;
          let endValue = document.getElementById('endValue').value;
        
          //Parse our inputs into numbers
          startValue = parseInt(startValue);
          endValue = parseInt(endValue);
        
          //Verify our inputs are numbers
          if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
            //If they are numbers, generate on the page
            let numbersArray = GenerateNumbers(startValue, endValue)
            DisplayNumbers(numbersArray);
          }
          else 
          {
            //If they are not, tell the user
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Only integers are allowed for Perator'
              });
          }
        }
        
        //Generate our numbers
        function GenerateNumbers(start, end) {
          let numbers = [];
        
          for (let i=start; i <= end; i++) {
        
            numbers.push(i);
          }
        
          return numbers;
        }
        
        //Display them on the page
        function DisplayNumbers(numbersArray) {
          let tableBody = document.getElementById('results');
          let tableHTML="";
        
          for(let i=0; i < numbersArray.length; i++){
            let value = numbersArray[i];
            className='';
        
            /* If the value is even make the className even, 
            else its className will be odd*/
            if(value%2==0){
              className='even';
            }
            else{
              className = 'odd'
            }
          
            /* To make the table easier to read, start a new 
            row every 5 indexed values*/
            if(i%5==0){
              tableHTML+=''
            }
        
            // Generate the td HTML and append it to the table html
            let tableRow=`${value}`;
            tableHTML += tableRow;
        
            /*Check if the next index is divisible by 5 and if so 
            close our tr tag on the current row*/
            if((i+1)%5==0){
              tableHTML+='';
            }
          }
        
          tableBody.innerHTML = tableHTML;
        }
      
    

The code is structured in with three functions.

GetValues()

This function is our entry point. First we grab the inputs and reassign them from strings to integers. We then check to ensure that the inputs are actually integers and if so we are going to generate a list of numbers between the input number values and display them. If one of the inputs is not an integer let the user know they must enter numbers only.

GenerateNumbers()

To generate the numbers we loop through all the numbers from the starting value to the ending value and push each one into an array. When the loop has finished running, we return the array that we created.

DisplayNumbers()

Once we have our numbers we pass that array into a display function. We loop throught he array and use the modulo operator on each value to check if its even or odd and then assign an appropriate class for css styling. We then check if the current value should be on the current row of the table or if a new row should be started. In this case we are keeping the table 5 columns wide. Now all we need to do is use a template literal to build the cell datas html using the correct css class and value. This is then appended onto the end of the exitisting tableHTML string, and the loop runs again till we finish building the table string. To show it on the screen we set the innerHtml of our results div to our completed tableHTML string.