The Code for SPEEDY CODE

                    //get the values from the Page
                    //starts or controller function
                    function getValues(){
                        //get values from the page
                        let startValue = document.getElementById("startValue").value;
                        let endValue = document.getElementById("endValue").value;
                    
                        //We need to validate our input
                        //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 the startValue to the endValue
                    //logic function(s)
                    function generateNumbers(sValue, eValue){
                    
                        let numbers = [];
                    
                    
                        //we want to get all numbers from start to end
                        for(let index = sValue; index <= eValue; index++){
                            //this will execute in a loop until index = eValue
                            numbers.push(index);
                        }
                    
                        return numbers;
                    }
                    
                    //display the numbers and mark even numbers bold
                    //display or view function(s)
                    function displayNumbers(numbers){
                    
                        let templateRows = "";
                    
                        for (let index = 0; index < numbers.length; index++) {
                            
                            let className = "even";
                    
                            let number = numbers[index];
                    
                            if(number % 2 == 0){
                                if(number == 0){
                                className = "odd";
                                }
                                else{
                                    className = "even";
                                }
                            } else {
                                className = "odd";
                            }
                            //This doesn't render correctly with Prism. See the source.
                            templateRows += `${number}`;
                        }
                    
                        document.getElementById("results").innerHTML = templateRows;
                    }
                    //This code below runs inline at the bottom of app.html
                    document.getElementById("btnSubmit").addEventListener("click",getValues);
                    
                

The code shown contains all of the Javascript used in this project. Most of the Javascript is contained inside of an external script, site.js. One line of Javascript runs inline inside of app.html. A few key pieces of it are explained below.

getValues

getValues is a function that is triggered when the "Start!" button is clicked on the app webpage. (See the bottom of the Javascript.)
It declares startValue and endValue which it grabs from the number input on the app webpage.
It validates that the user input is indeed numbers and not letters. Then, it passes those numbers to the function, generateNumbers.

generateNumbers

generateNumbers takes in the values given to it by getValues and creates an array using a for loop. This array is contained within the numbers variable. generateNumbers then returns the numbers variable which allows us to use it in our next function, displayNumbers.

displayNumbers

displayNumbers declares the variable templateRows, an empty string, which will be filled with numbers, one by one, and then used to create table rows on our app page. The function then creates another for loop which uses our numbers variable index length to calculate how many numbers it needs to push to our app page.
Each index, or number, is passed through a for loop to determine if it is 0, even, or odd. If it is 0 or odd, it is left alone. If it is even, the .even class is applied to it, which makes the number bold.
The for loop then takes the number and inserts it into the templateRows variable with a html table row and cell. The templateRows variable is then inserted into the tbody html element using the results id. This is repeated until the for loop ends.

I hope you learned something new! For more projects, check out the about page in the navbar at the top of the website.