"use strict";

                            //Start or Controll function - get needed values
                            function getValues() {
                                // 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
                                    let numbers = generateNumbers(startValue, endValue);

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

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

                                }

                            }

                            //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) {

                                // array to hold fizz, buzz, fizzbuzz or the number
                                let fbArray = [];

                                // loop through the numbers array
                                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(%)
                                    if ((number % 3 == 0) && (number % 5 == 0)) {
                                        fbArray.push('FizzBuzz');
                                    } else if (number % 3 == 0) {
                                        fbArray.push('Fizz');
                                    } else if (number % 5 == 0) {
                                        fbArray.push('Buzz');
                                    } else {
                                        // push the number to the arry
                                        fbArray.push(number);
                                    }

                                }

                                // get the tbody element from the page by it's ID
                                let tableBody = document.getElementById('results');

                                // get the html template the defines the table row and the table data structure
                                let rowTemplate = document.getElementById('rowTemplate');

                                // make sure the html table is already clear
                                tableBody.innerHTML = "";

                                // loop thrugh fbArray in sets of five
                                for (let j = 0; j <= fbArray.length -1; j += 5) {

                                    // get a copy of the template as document fragment to populate content in the page
                                    let tableRow = document.importNode(rowTemplate.content, true);

                                    // get just the template  and add them to an array
                                    let rowCols = tableRow.querySelectorAll('td');

                                    rowCols[0].classList.add(fbArray[j]);  // add 'Fizz', 'Buzz' or "FizzBuzz" as a css class
                                    rowCols[0].textContent = fbArray[j];

                                    rowCols[1].classList.add(fbArray[j + 1]);
                                    rowCols[1].textContent = fbArray[j + 1];

                                    rowCols[2].classList.add(fbArray[j + 2]);
                                    rowCols[2].textContent = fbArray[j + 2];

                                    rowCols[3].classList.add(fbArray[j + 3]);
                                    rowCols[3].textContent = fbArray[j + 3];

                                    rowCols[4].classList.add(fbArray[j + 4]);
                                    rowCols[4].textContent = fbArray[j + 4];

                                    tableBody.appendChild(tableRow);

                                }

                            }
                        
                    

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 to see if it is a multiple of '3' or/and '5' against a zero modulus result. Each result is then pushed to the fbArray as either a string of 'Fizz', 'Buzz', 'FizzBuzz' or the integer itself if false.

Finally, we loop through the fbArray in sets of five, getting the html rowTemplate from the page using document.importNode(). Selecting all the 'td' tags within the rowTemplate as an array called 'rowCols' we set the class on each td and its' textContent to the same as its value ('Fizz', 'Buzz', 'FizzBuzz' or the integer) in the fbArray and populating the page using tableBody.appendChild(tableRow).