The Code for BOCRA


                            // get the values from the page
                            // starts or controller function
                            function getValues() {
                                // get values from the page
                                let startValue = document.querySelector('#startValue').value;
                                let endValue = document.querySelector('#endValue').value;

                                // validate our inputs
                                // parse into integers
                                startValue = parseInt(startValue);
                                endValue = parseInt(endValue);

                                if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
                                    // call generateNumbers
                                    let numbers = generateNumbers(startValue, endValue);

                                    // call displayNumbers
                                    displayNumbers(numbers);
                                } else {
                                    alert('You must enter integers');
                                }
                            }

                            // generate numbers from startValue and endValue
                            // logic functions(s)
                            function generateNumbers(startValue, endValue) {
                                let numbers = [];

                                // get all numbers from start to end
                                for (let i = startValue; i <= endValue; i++) {
                                    // execute in a loop until index = end value
                                    numbers.push(i);
                                }

                                return numbers;
                            }

                            // display the numbers and mark even numbes bold
                            // display or view functions
                            function displayNumbers(numbers) {
                                let templateRows = '';

                                for (let i = 0; i < numbers.length; i++) {
                                    let number = numbers[i];
                                    let className = 'even';

                                    if (number % 2 === 0) {
                                        className = 'even';
                                    } else {
                                        className = 'odd';
                                    }

                                    // This does render correctly with Prisim see the source
                                    templateRows += `<tr><td class="${className}" >${number}</td></tr>`;
                                }

                                document.getElementById('results').innerHTML = templateRows;
                            }
                        

The Code is structured in several functions.

getValues

Gets the user input and validates the values. Calls the generate and display functions.

generateNumbers

Creates an array of numbers based on the user input start and end value.

displayNumbers

Displays the array of numbers in a table of rows with the even numbers bolded.