The Code

See the example code block below for the actual Javascript code used to build this app.

                    
// get the start and end numbers from the page
// Entry point of application AKA Controller function
function getValues() {
// declared that start/endValue string is to pull and "hold" 
// the values from the HTMl ID "start/endValue"
    let startValue = document.getElementById('startValue').value; // fetch startValue = "0" from user/HTML
    let endValue = document.getElementById('endValue').value; // fetch endValue = "100" from user/HTML
// convert value from string to integer/value ex: startNumber/endNumber
    let startNumber = parseInt(startValue); 
    let endNumber = parseInt(endValue); 
// they are valid numbers - not "NaN"
// if start is an integer it's true, 
// if it's not a number, it's false
    if (Number.isInteger(startNumber) && Number.isInteger(endNumber)) {
        // array created from startNumber/endNumber, values stored inside array numberArray
    let numberArray = generateNumbers(startNumber, endNumber);
    // displaysNumbers displays numberArray values
        displayNumbers(numberArray);
    } else {
        //display an error
        Swal.fire({
            icon: 'error',
            title: 'Oops!',
            text: 'Please enter valid numbers for the start and end values.'
        });
    }
}
// generate the range of numbers to display
// Business/logic function
function generateNumbers(start, end) {
// basketOfNumbers will accept/hold values from for loop
    let basketOfNumbers = [];
    // for loop starts at integer number; 
    // keep running as long as (it's less than or equal to endNumber); 
    // start at index number and add plus 1 each time 
    // until previous <= statement is no longer true
    for (let number = start; number <= end; number = number + 1) {
        number;
        basketOfNumbers.push(number); //[0, 2, 3,..., 100]
    }
// returns or passes back out values from basketOfNumbers
    return basketOfNumbers; // => [0, 2, 3,..., 100]
}

// placing the generated numbers  on the page AND coloring the even numbers
// View function
function displayNumbers(numbers) { //[0, 2, 3,..., 100] => length = example: 101 digits or spaces
    let results = '';
// for loop adds 1 to index number, then calculates if index numner is divisible by 2,
// if remainder equals "0" exactly, if a match it applies the CSS class of "evenNumber" 
// coloring the even integers purple, else/otherwise it returns the (odd) integers 
// colored black. 
    for (let index = 0; index < numbers.length; index = index + 1) {
        let currentNumber = numbers[index];
        if (currentNumber % 2 == 0) {
            results = results + `<tr><td class="evenNumber">${currentNumber}</td></tr>`;
        } else {
        results = results + `<tr><td class="oddNumber">${currentNumber}</td></tr>`;
        }
    }
// results = "<tr><td>10</tr></td>11<tr><td>12</tr></td>..."
// results are passed back into HTML ID "results" into table
    let tableBody = document.getElementById('results');
    tableBody.innerHTML = results;
}
                        
                    
                

The code is structured in three functions.

displayMessage

prints out the message