"use strict"

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

    //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 iterate over the numbers array
    //and check for multiples of 3 and 5
    numbers.forEach((num)=>{
        
        let row = $("results").insertRow();
        let cell = row.insertCell();

        if(num % 3 == 0 && num % 5 == 0) {
            row.className = "bold-orange";
            cell.innerHTML = "FizzBuzz";
        } else if (num % 3 == 0){
            row.className = "bold";
            cell.innerHTML = "Fizz";
        } else if(num % 5 == 0) {
            row.className = "bold";
            cell.innerHTML = "Buzz";
        } else {
            cell.innerHTML = num;
        }

    });

}
//when window loads
window.onload = function() {
    //when the event of click occurs trigger the fizzBuzz function
    $("btnSubmit").onclick = function() {
        //this statement resets the table body data
        $("results").innerHTML = "";
    
        fizzBuzz();
    }
}                      
                    

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 multiple of 3 we display Fizz, if the number is multiple of 5 we display Buzz. Then if the number is multiple of both 3, and 5 we display FizzBuzz with an orange background.

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 FizzBuzz it is clicked. When this event happens we call our fizzBuzz function.