"use strict";

                            // Start or Controll function - get needed values
                            function getValues() {
                                let numbers;

                                // get unique input values from the page
                                let startValue = document.getElementById('startValue').value;
                                let endValue = document.getElementById('endValue').value;

                                // Use the "parseInt()" function to cast/convert from string input to integers    
                                startValue = parseInt(startValue);
                                endValue = parseInt(endValue);

                                // validate - check if above parsed input are integers
                                if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                                    // if true call generateNumbers() - generate the numbers return them in an array
                                    numbers = generateNumbers(startValue, endValue);

                                } else {
                                    alert("You must enter whole integers.");

                                }

                                // Call the display function with "numbers" variable to display results on the page 
                                displayNumbers(numbers);


                            }

                            //Logic function - Generate numbers based on the start and endvalue
                            function generateNumbers(sValue, eValue) {
                                // Declare an array variable called numbers and set it equal to []
                                let numbers = [];


                                // loop over the sValue and eValue from start to end.
                                for (let i = sValue; i <= eValue; i++) {
                                    // add each number to the "numbers" array
                                    numbers.push(i);

                                }

                                // Return the "numbers" array
                                return numbers;

                            }

                            // View/Display Function - display the results (numbers) to the screen
                            function displayNumbers(numbers) {
                                // Delare a variable called "className" and set it equal to 'even' for use with displaying even numbers
                                let className = 'even';

                                //Decalre a variable called "templateRows" and set it equal to ''
                                let templateRows = "";

                                // loop through the numbers array- allow loop to run up to numbers.length

                                for (let i = 0; i < numbers.length; i++) {
                                    // declare "number" variable and set it equal to numbers[index]
                                    let number = numbers[i];

                                    // use "if-else-statement" to test each number against the zero modulus(%). (ie. number % 2 == 0)
                                    if (number % 2 == 0) {
                                        className = 'even';
                                        // concate loop - Template literals (Template strings) do not render correctly in this code view - see the project git repo
                                        templateRows += `<tr><td class="${className}" >${number}</td></tr>`;
                                    } else {
                                        className = 'odd';
                                        // concate loop - Template literals (Template strings) do not render correctly in this code view - see the project git repo
                                        templateRows += `<tr><td class="${className}" >${number}</td></tr>`;
                                    }

                                }

                                // HTML Markup - set the "results" element and it's innerHTML to the concatenated "templateRows"
                                document.getElementById('results').innerHTML = templateRows;
                                
                            }
                        
                    

One-Hundred

Using HTML, custom CSS, Bootstrap and Javascript we can design a responsive application that can take user input (starting value and ending value), generate and display a count of the resulting range of numbers and denote the even numbers in bold.

getValues() function:

Here we use javascript to "Get" the values from the HTML file user input fields by using document.getElementById to locate the html tags with id's of startValue and endValue

Parse our input:

Here we use the built in function parseInt() to convert the input values for startValue and endValue, which are strings, to integers

Validate input:

Using an if-statement we want to validate that the parsed input are actually integers since parseInt() will convert a non-number string to NaN (meaing Not a Number). If if both values are integers, we call a function that will generate an array of integers based on the range of startValue and endValue input. If not, we display an alert box message informing the user to input integers.

generateNumbers() function:

Both integers are then pass to the generateNumbers(sValue, eValue) function that will loop from the start to end range populating the empty numbers = [ ] array and then return that array.

displayNumbers() function:

After the populated array is returned the displayNumbers(numbers) function is called. Looping through the array with an if-statement to check each number for even or odd against a zero modulus result. Each integer is then concatenated and asigned to the template literal HTML markup variable called templateRows with it's set className of even or odd. Finally, the completed templateRows results are set in the HTML page via a tag with the element id of results using getElementbyId and it's innerHTML property.