The Code for Race to 100


                    //get the values from the page
                    //program starts here, controller function 
                    function getValues(){
                        //get values from the page 
                        let startValue = document.getElementById("startValue").value;
                        let endValue = document.getElementById("endValue").value;

                        //parse into Integers
                        startValue = parseInt(startValue);
                        endValue = parseInt(endValue);

                        //check that inputs are integers
                        if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                            //call generateNumbers
                            let numbers = generateNumbers(startValue, endValue);
                            //call displayNumbers
                            displayNumbers(numbers);
                        } else {
                            alert("You must enter integers");
                        }

                    }

                    //generate numbers from start value to the end value 
                    //logic function
                    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, mark even numbers in bold 
                    //display or view function
                    function displayNumbers(numbers){
                        let templateRows = "";

                        for (let index = 0; index < numbers.length; index++) {
                            let className = "even";
                            let number = numbers[index];
                            if (number % 2 == 0) {
                                className = "even";
                            } else {
                                className = "odd";
                            }

                            //This does not render correctly with Prism 
                            //See the Source code
                            templateRows += `${number}`;
                        }

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

                    }
                    
                

The Code is structured in three functions.

Get Values

Get Values is a function that retrieves the numbers from the user input and checks that they are integers. If the input is not an integer set, the function produces an error message. If the input is an integer set, the function will call the Generate Numbers and Display Numbers functions.

Generate Numbers

Generate Numbers is a function that adds each of the values between the input values to an array. The returned array contains all values between the input values, inclusive of the initial start and end values.

Display Numbers

Display Numbers is the logic function. It runs a for loop that contains boolean logic to check if each number is even or odd. It uses template literals to pass these values back to the HTML table.