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

                            // parse to int
                            startValue = parseInt(startValue);
                            endValue = parseInt(endValue);

                            // validate input values
                            if (Number.isInteger(startValue) && Number.isInteger(endValue)){
                                // we call generateNumbers
                                let numbers = generateNumbers(startValue, endValue)
                                // we call displayNumbers
                                displayNumbers(numbers)
                            } else {
                                alert("You must enter integers for the app to work");
                            }


                        }

                        // generate numbers from the start value to the end value
                        function generateNumbers(startValue, endValue) {
                            let numbers = [];

                            // get all numbers from start till end
                            for (let i = startValue; i <= endValue; i++) {
                                numbers.push(i);
                            }

                            return numbers;
                        }

                        // display numbers and  bold the even numbers
                        function displayNumbers(numbers) {
                            // create template rows
                            let templateRows = "";

                            let className = "";

                            // loop through numbers array
                            for (let i = 0; i < numbers.length; i++) {
                                let number = numbers[i];

                                if (number % 2 == 0) {
                                    className = "even";

                                } else {
                                    className = "odd";
                                }

                                templateRows += `${number}`;
                                document.getElementById("results").innerHTML = templateRows;
                            }
                        }

                        document.getElementById('btnSubmit').addEventListener('click', getValues);
                    

The Code is structured in three function

Get Values

Retrieves the values from the inputs, checks and parses the values to integers so they can be used in the generateNumbers function.

Generate numbers

Using a for loop, we generate a array of numbers from the startValue to the endValue.

Display Numbers

After receiving the array of numbers, we loop through it and check for even numbers. When we find one, we add a .even class that makes the number bold, and after that, we create the template string that we insert to the InnerHtml of the table body with the id of #result . When we find a odd number, we add a .odd class .