//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
    //parse into integers
    startValue = parseInt(startValue);
    endValue = parseInt(endValue);

    if(Number.isInteger(startValue) && Number.isInteger(endValue)){
        //we need to call generateNumbers
        let numbers = generateNumbers(startValue, endValue);
        //we need to call displayNumbers
        displayNumbers(numbers);
    } else{
        alert("You must enter integers");
    }

}

//generate numbers from startvalue to the endValue
//logic functions(s)
function generateNumbers(sValue, eValue){

    let numbers = [];

    //get all numbers from start to end
    for (let index = sValue; index <= eValue; index++){

        //this will execute in a loop until index = eValue
        numbers.push(index);
    }
    return numbers;

}

//display the numbers and marrk even numbers in 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";

        }

        templateRows += `<tr><td class="${className}" >${number}</td></tr>`;
    }

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

}

Arrays and Loops

This coding exercise helped me learn about how to loop through an array and print the data into an html table.

I used Javascript functions, dom manipulation, loops, if/then/else statements, and boolean logic to complete this exercise.