// 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.