"use strict"

//retrieves the id of the HTML element
let $ =(id)=> {
    return document.getElementById(id);
}
//makes the even numbers BOLD
let makeBold = () => {

    //this array will hold the numbers generated using a for loop
    let numbers = [];

    //get the start and end number from the user
    //and convert them to a number
    let startValue = parseInt($("startValue").value); 
    let endValue = parseInt($("endValue").value);


    //populate the array using the starting and ending values
    for(startValue; startValue <=  endValue; startValue++) {
        numbers.push(startValue);
    }

    //using the forEach function iterates over the numbers array
    //and check for even numbers, and make them bold
    numbers.forEach((num)=>{
        let row = $("results").insertRow();
        let cell = row.insertCell();
        cell.innerHTML = num;
    
        if(num % 2 == 0) {  
            row.className = "bold";
        }
    });
    
}
    //when window loads
    window.onload = function() {
        //when the event of click occurs trigger the makeBold function
        $("btnSubmit").onclick = function() {
        //this statement resets the table body data
        $("results").innerHTML = "";

        makeBold();
    }
}
                        

The Code is Structured in Two Functions

The first function simply uses a return statement to grab the ID of a specific element, and return its value.

Inside the second function, we declare an empty array. This array will later be used to store the values between the starting value and the ending value provided by the user.

Then using $ function we retrieve the starting value and the ending value. We make sure that we convert the strings numbers to integers. We then use a for loop to populate our empty array. The array will have numbers ranging from the starting value and ending value.

In the end we use the forEach() method to iterate over our array. This method takes a callback function. Inside the callback function, we then create a new row and a new cell. Using an if statement and the % module operator, we check if the number is even. If the number is indeed even, we make that particular row bold.

Finally, in the end we use the window object and the onload method to load the script just after the DOM has loaded. Inside the function we add an event listener that listen if the button Turn On Zedred is clicked. When this event happen we call our makeBold function.