The Code for Hundo


                        // get the values from the Page
                        function getValues() {
                            let startValue = document.getElementById('startValue').value;
                            let endValue = document.getElementById('endValue').value;
                        
                            //parse into integers
                            startValue = parseInt(startValue);
                            endValue = parseInt(endValue);
                        
                            if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                                //call generateNumbers
                                let numbers = generateNumbers(startValue, endValue);
                        
                                //call displayNumbers
                                displayNumbers(numbers);
                        
                            } else {
                                alert('You must enter a number')
                            }
                        }
                        
                        // generate numbers from the start value to the end value
                        function generateNumbers (startValue, endValue) {
                        
                            let numbers = [];
                        
                            // Get all numbers from start to end
                            for (let i = startValue; i <= endValue; i++) {
                                numbers.push(i);   
                            }
                            
                            return numbers;
                        }
                        
                        // display the numbers and mark even numbers bold
                        function displayNumbers (numbers) {
                        
                            let className = "even"
                        
                            let templateRows = "";
                        
                            for (let i = 0; i < numbers.length; i++) {
                                
                                let number = numbers[i];
                        
                                if(number % 2 == 0) {
                                    className = "even"
                                } else {
                                    className = "odd";
                                }
                                
                                // This does render correctly with Prism see the source
                                templateRows += `<tr><td class="${className}" >${number}</td></tr>`
                        
                            }
                            
                            document.getElementById("results").innerHTML = templateRows;
                        }
                    
                    

The Code is structered in three functions.

getValues

getValues accepts(gets) the user input from the page. It utilizes getElementById to pull the vallues from the page. It passes those values to the generateNumbers function. The fuction generateNumbers returns an array of values and passes that array to the displayNumbers function.

generateNumbers

generateNumbers takes in two parameters startValue and endValue. We create a variable (numbers) that holds an array. A for loop is to generate all of the numbers between startValue and endValue.

displayNumbers

displaynumbers takes in one parameter numbers. The variable numbers is an array that holds values between startValue and endValue. We create a variable (className) that holds the name of a CSS class that we will use to bold the numbers. We create a variable templateRows that will hold the html we will write to the page.

A for loop is used to check all of the numbers to see if they are even or odd. The remainder operator (%) is used to see if the number is divisable by two. If it returns zero than it's even. if not (else) it's odd. The correct className is injected into the html row for display. Each interation of the lop adds to the templateRows variable. At the end of the loop resulting HTML rows are written to the page.