The Code For ZERO TO 100.

                            
                                function getValues() {

                                    //get values from user
                                    let startValue = document.getElementById("startValue").value;
                                    let endValue = document.getElementById("endValue").value;
                                    
                                    //validate data
                                    startValue = parseInt(startValue);
                                    endValue = parseInt(endValue);

                                    if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                                        let numbers = generateNumbers(startValue, endValue);
                                        displayNumbers(numbers);
                                    }
                                    else {
                                        alert("Error: You must enter integers");
                                    }
                                }

                                function generateNumbers(startValue, endValue) {
                                    
                                    let numbers = [];
                                    
                                    for(let i = startValue; i <= endValue; i++) {
                                        numbers.push(i);
                                    }

                                    return numbers; 1
                                }

                                function displayNumbers(numbers) {

                                    let templateRows = "";
                                    
                                    //Note: html tags do not render correctly with prism. That is why there are spaces between them.
                                    for(var i = 0; i < numbers.length; i++) {
                                        let number = numbers[i];

                                        if(i % 2) {
                                            templateRows += `< tr >< td >< strong >${number}< strong />< td />< tr />`;
                                        }
                                        else {
                                            templateRows += `< tr >< td >${number}< td />< tr />`;
                                        }

                                    }

                                    document.getElementById("results").innerHTML = templateRows;
                                }
                            
                        

The Design:

In order to keep the code as clean as possible, the program is encapsulated into three functions:

• getValues:

This function acts as the entry point of the program with the task of storing the values of the startValue and endValue input fields into variables by using JavaScript's built in document.GetElementById method. It then validates that the data is a number and calls the generateNumbers and displayNumbers functions.

• generateNumbers

This function acts as the main logic of the program as it generates the array of numbers that will be displayed on the page. It takes in two arguments: startValue and endValue. The array of numbers is defined within the function. It then loops from the startValue argument's number to the endValue argument's number, pushing the current number to the end of the array. Finally it returns the array of numbers.

• displayNumbers

Finally, all that's left is to manipulate the DOM to display the generated array of numbers to the page. To do this, this function takes in one argument: numbers(the previously generated array). First, a local empty string variable is declared(templateRows) which acts as a singular row in the table. Next, the function loops as many times as the array's length number. In this loop a template string is added to the templateRows variable with the neccessary HTML to insert a row in a HTML table with a number corresponding to the current number in the loop. Finally it assigns the document.getElementById("results").innerHTML property to the templateRows variable that was just generated.