The Code for HundredNext

                        
                                                        
                            function getValues(){
                                // get values from the page
                                let startValue = document.getElementById("startValue").value;
                                let endValue =document.getElementById("endValue").value;
                                // changes values from string to number
                                startValue = parseInt(startValue)
                                endValue = parseInt(endValue)

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

                            //generate numbers from startvalue to the endValue
                            function generateNumbers(sValue, eValue){
                                let numbers = []
                                // we want to get all numbers from start to end
                                for(let i = sValue; i <= eValue; i++){
                                    numbers.push(i)
                                }
                                return numbers
                            }

                            //display the numbers and mark even numbers bold
                            function displayNumbers(numbersArr){
                                let templateRows = ""

                                for(let i = 0; i < numbersArr.length; i++){
                                    let number = numbersArr[i]
                                    let className = "odd"
                                    
                                    if(number % 2 == 0){
                                    className = "even"
                                    }
                                    //This does not render properly with Prism see the source.
                                    templateRows += `${number}`     
                                }
                                document.getElementById("results").innerHTML = templateRows;
                            }

This code uses your input to return a range of numbers back to you. If the number is even, it will be in bold.

getValues

getValues is the main function that retrieves and validates the values from the DOM.

It changes the values from a string to an integer, and passes the values to the rest of the functions (generateNumbers and displayNumbers) after confirming that the values are integers.

generateNumbers

generateNumbers is a function that uses the start values and end values inputted as the range to create an array of numbers that will be displayed.

It uses a for loop to iterate through each number between the start and the end value and returns an array containing those numbers.

displayNumbers

displayNumbers retrieves the array from generateNumbers and creates the html markup to add to the DOM in another for loop.

Inside this for loop, the function will also check to see if it is odd or even, and will give the appropriate class name that will change the style of the number acordingly.It will create a string of template rows to be added to a table in the DOM.

After creating the string of numbers with their class name, we add the string into the DOM and have it displayed to the user.

In line 39, the addition of templateRows is not rendered correctly. Inside the back ticks I nested the numbers inside a table row and table detail element, with a class=`${className}` to also add the css style for that number.