// CONTROLLER FUNCTION(S)
                            // Get the values from the UI
                            function getValues() {
                                // get values from the page
                                let startValue = document.getElementById("startValue").value;
                                let endValue = document.getElementById("endValue").value;
                            
                                // convert to Numbers
                                startValue = Number(startValue);
                                endValue = Number(endValue);
                            
                                // if valid input, generate and display numbers
                                if (validateInput(startValue,endValue)) {
                                    // call generateNumbers
                                    let numbers = generateNumbers(startValue, endValue);
                                    // call displayNumbers
                                    displayNumbers(numbers);
                                }
                            }
                            
                            
                            // LOGIC FUNCTION(S)
                            // Generate numbers from the startValue to the endValue
                            function generateNumbers(sValue, eValue) {
                                let numbers = [];
                            
                                // get all numbers from start to end
                                for (let index = sValue; index <= eValue; index++) {
                                    numbers.push(index);
                                }
                            
                                return numbers;
                            }
                            // Validate input
                            function validateInput(sValue, eValue) {
                                let output = true;
                            
                                // check numbers are integer
                                if (!Number.isInteger(sValue) || !Number.isInteger(eValue)) {
                                    alert("You must enter integers!")
                                    output = false;
                                }
                            
                                // check endValue is greater or equal to startValue
                                if (sValue > eValue) {
                                    alert("End Value must be greater or equal to Start Value!")
                                    output = false;
                                }
                            
                                if (eValue - sValue > 1000) {
                                    alert("The difference between values must be no greater than 1000!")
                                    output = false;
                                }
                            
                                return output;
                            }
                            
                            
                            // VIEW FUNCTION(S)
                            // Display the numbers and mark even numbers BOLD
                            function displayNumbers(numbers) {
                                let templateRows ="";
                            
                                for (let index = 0; index < numbers.length; index++) {
                                    let className = "even";
                                    let num = numbers[index];
                            
                                    // if / by 2 with no remainder, then num is even
                                    if (num % 2 == 0) {
                                        className = "even";
                                    }
                                    else {
                                        className = "odd";
                                    }
                                    // This does not display correctly in Prism, please view source code.
                                    templateRows += `${num}`;
                                }
                            
                                document.getElementById("results").innerHTML = templateRows;
                            }
                        
                    

The Code is structured in four functions.

getValues

getValues accepts(gets) the user input from the page. It utilises getElementById to pull values from the page, and then converts them to a 'Number' value. The input values are validated with the validateInput function. If valid, the values are passed to the generateNumbers function. The function generateNumbers returns an array of values and passes that array to the displayNumbers function.

generateNumbers

generateNumbers takes in two parameters: startValue and endValue. An array variable named 'numbers' is created. A for loop is used to generate all of the numbers between startValue and endValue.

validateInput

validateInput takes in two parameters: startValue and endValue, and returns a boolean value, dependent on three validation checks. The validations are undertaken using separate 'if' statements and check the following:

• The input values are integers.
• endValue is greater or equal to startValue.
• The difference between the values is no greater than 1000.

If any inputs are not valid, then the function return a value of false, and a corresponding alert. If false, the 'if' statement in getValues, which evaluates the output of validateInput, will not run the generateNumbers and displayNumbers functions.

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 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 odd or even. The remainder operator (%) is used to see if the number is divisible by two. If it returns zero then the number is even, if not (else), the number is odd. The correct className is injected into the HTML row for display. Each iteration of the loop adds to the templateRows variable. At the end of the loop the resulting HTML rows are written to the page.