The Code for The Hundreds


                        function getValues() {
                            let startValue = document.getElementById("startValue").value;
                            let endValue = document.getElementById("endValue").value;
                        
                            startValue = parseInt(startValue);
                            endValue = parseInt(endValue);
                        
                            if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                                let numbers = generateNumbers(startValue, endValue);
                                displayNumbers(numbers)
                            } else {
                                alert("You must enter integers")
                            }
                        }
                        
                        function generateNumbers(startValue, endValue) {
                            let numbers = [];
                            for (let i = startValue; i <= endValue; i++) {
                                numbers.push(i);
                            }
                            return numbers;
                        }
                        
                        function displayNumbers(numbers) {
                            let templateRows = "";
                            let className = "";
                            for (let i = 0; i < numbers.length; i++) {
                                let number = numbers[i];
                                if (number % 2 == 0) {
                                    className = "even";
                                } else {
                                    className = "odd";
                                }
                                //This does not render properly with Prism. Please see source code
                                templateRows += `${number}`
                            }
                            document.getElementById("results").innerHTML = templateRows;
                        }
                    
                    

The Code is structed in three functions.

getValues()

This function declares two variables to retrieve the start and ending values from the application's form. It parses them to verify the values are integers. If they are, the values are passed to the generateNumbers function and the returned array is passed to the final displayNumbers function.

generateNumers()

This function recieves the passed parameters from the getValues function, declares an empty array, uses a for loop to insert the values between the passed parameters into the array, and finally return the array.

displayNumbers()

This function recieves the passed array from the getValues function, declares empty strings to use to insert HTML tags and classes to the DOM. It uses a for loop to loop through the indexes of the array and depending on whether the values are even or odd to assign an appropriate class name. It then appends to a string the HTML tags, classes and content for a table using a string literal. Finally it inserts this into the DOM.