// get the values from the page
    // starts or controller function
    function getValues() {
        // get values from the page
        let startValue = document.getElementById("startValue").value;
        let endValue = document.getElementById("endValue").value;
    // we need to validate our input for integers we need to perse it and check it 
        //parse into integers
        startValue = parseInt(startValue);
        endValue = parseInt(endValue);
    
        if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
            // we call generateNumbers
            let numbers = generateNumbers(startValue, endValue);
            // we call displayNumbers
            displayNumbers(numbers);
    
        } else {
            alert("You must enter integers");
        }
      
    }
    
    // generate numbers from start Value to the end Value
    // logic function(s)
    function generateNumbers(sValue, eValue){
    
        let numbers = [];
    
        // We want to get all numbers from to start to end
        for (let index = sValue; index < eValue; index++) {
            // this will execute in a loop un till index = eValue
            numbers.push(index);
        }
    
        return numbers;
    }
    
    // display the numbers and mark even numbers bold
    // display or view functions
    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 dose not render correctly with Prism see the source
            templateRows += `${number}`;
    
        }
    
        document.getElementById("results").innerHTML = templateRows
    
    }