The Code

                    
                        // get the user input from the page
                        // Controller function
                        function getValues() {
                        
                            // get the values from the page
                            let startValue = document.getElementById('startValue').value;
                            
                            let endingValue = document.getElementById('endingValue').value;
                            
                            // parse string into ints
                            startValue = parseInt(startValue);
                            
                            endingValue = parseInt(endingValue);
                            
                            // verify inputs are numbers
                            if (Number.isInteger(startValue) && Number.isInteger(endingValue)) {
                                // if they are, generate numbers
                                let numbersArray = generateNumbers(startValue, endingValue);
                                
                                // then display them on the page
                                displayNumbers(numbersArray);
                                
                                } else {
                                // if they are not, tell our user!
                                Swal.fire(
                                    {
                                    icon: 'error',
                                    title: 'Oops!',
                                    text: 'Only whole numbers are allowed for One Hundred!'
                                    }
                                );
                            }
                        }
                        
                        // generate our numbers
                        // Logic function
                        function generateNumbers(start, end) {
                        
                        let numbers = [];
                        
                        for (let i = start; i <= end; i++) {
                             numbers.push(i); 
                            } 
                            return numbers; 
                        }

                        // display them on the page
                        // View function
                        function displayNumbers(numArr) {

                            let tableBody = document.getElementById('results');

                            let tableHTML = '';

                            for (let i = 0; i < numArr.length; i++) {
                                let value = numArr[i];
                                let className = '';

                                if (value % 2 === 0) {
                                    className = 'even';
                                } else {
                                    className = 'odd'
                                }
                                
                                let tableRow = `<tr><td class='${className}'>${value}</td></tr>`;
                                tableHTML += tableRow;
                            }

                            tableBody.innerHTML = tableHTML;
                        }
                    
                

The code is structured in three functions

getValues()

This function is what allows the user to interact with the app. The function waits and listen for the user to click the "Display the range" button. Once the button is pressed, it takes in the information provided by the user on the App page, and first converts the information to numbers.

After the verification is completed, if the information does not pass the check, it will prompt the user to enter whole numbers only. If the information does pass the check, it stores it for use in other parts of the program to use.

generateNumbers(start, end)

This function uses the information provided from the getValues() function and generates a range of numbers in ascending order between the starting and ending value.

displayNumbers(numArr)

This function displays the numbers from the generateNumbers(start, end) function on the screen and makes all the even numbers bold.