THE CODE FOR:

                        
                            function getValues() {
                                clearList();
                            
                                let firstNumber = document.getElementById("firstNumber").value;
                                let secondNumber = document.getElementById("secondNumber").value;
                                let startValue = document.getElementById("startValue").value;
                                let endValue = document.getElementById("endValue").value;
                            
                                firstNumber = parseInt(firstNumber);
                                secondNumber = parseInt(secondNumber);
                                startValue = parseInt(startValue);
                                endValue = parseInt(endValue);
                            
                                if (Number.isInteger(firstNumber) && Number.isInteger(secondNumber)) {
                            
                                    //assign fizzBuzzAlgorithm return value to fizzBuzzValues
                                    let fizzBuzzValues = fizzBuzzAlgorithm(firstNumber, secondNumber, startValue, endValue);
                                    //display the values
                                    displayValues(fizzBuzzValues);
                            
                                } else {
                                    alert("You muuse enter Integers!");
                                }
                            }
                            
                            
                            function clearList() {
                                document.getElementById("results").innerHTML = "";
                            
                            }
                            
                            //business logic layer - Model
                            function fizzBuzzAlgorithm(fizz, buzz, start, end) {
                            
                                let fbValues = [];
                                let fizzBuzzCount = {
                                    fizz: 0,
                                    buzz: 0,
                                    fizzBuzz: 0
                                };
                            
                                for (let i = start; i <= end; i++) {
                            
                                    if (i % fizz == 0 && i % buzz == 0) {
                            
                                        fbValues.push('FizzBuzz');
                                        fizzBuzzCount.fizzBuzz++;
                            
                                    } else if (i % fizz == 0) {
                            
                                        fbValues.push('Fizz');
                                        fizzBuzzCount.fizz++;
                            
                                    } else if (i % buzz == 0) {
                            
                                        fbValues.push('Buzz');
                                        fizzBuzzCount.buzz++;
                                    } else {
                            
                                        fbValues.push(i);
                                    }
                                }
                                console.log(fizzBuzzCount);
                                displayFizzBuzzCount(fizzBuzzCount);
                                return fbValues;
                            }
                            
                            //View/Presentation layer
                            function displayValues(fizzBuzzDisplayed) {
                            
                                element = document.getElementById("results");
                            
                                fizzBuzzDisplayed.forEach(e => {
                                    let item = document.createElement("div");
                                    // item.classList.add("col-lg-3");
                                    item.classList.add("col-md-3");
                                    item.classList.add("border");
                            
                                    if (e == 'FizzBuzz') {
                                        item.classList.add("fizzBuzz");
                                    } else if (e == 'Fizz') {
                                        item.classList.add("fizz");
                                    } else if (e == 'Buzz') {
                                        item.classList.add('buzz');
                                    }
                                    item.innerHTML = e;
                                    element.appendChild(item);
                            
                                });
                            }
                            
                            function displayFizzBuzzCount(fizzBuzzCount) {
                                document.getElementById("fizzCount").innerHTML = fizzBuzzCount.fizz;
                                document.getElementById("buzzCount").innerHTML = fizzBuzzCount.buzz;
                                document.getElementById("fizzBuzzCount").innerHTML = fizzBuzzCount.fizzBuzz;
                            }
                            
                            //Algorithm using switch cases
                            function fizzBuzzB(fizz, buzz) {
                                let fbValues = [];
                            
                                let isFizz = false;
                                let isBuzz = false;
                            
                                for (let i = 1; i < 101; i++) {
                            
                                    isFizz = (i % fizz == 0);
                                    isBuzz = (i % buzz == 0);
                            
                                    switch (true) {
                                        case isFizz && isBuzz: {
                                            fbValues.push('FizzBuzz');
                                            break;
                                        }
                                        case isFizz: {
                                            fbValues.push('Fizz');
                                            break;
                                        }
                                        case isBuzz: {
                                            fbValues.push('Buzz');
                                            break;
                                        }
                                        default: {
                                            fbValues.push(i);
                                            break;
                                        }
                                    }
                            
                                    return fbValues;
                                }
                            }
                            
                            //Algorithm using ternary operator
                            function fizzBuzzC(fizz, buzz) {
                                let fbValues = [];
                            
                                for (let i = 1; i < 101; i++) {
                                    let value = ((i % fizz == 0 ? 'Fizz' : '') + (i % buzz == 0 ? 'Buzz' : '') || i);
                                    fbValues.push(value);
                                }
                            
                                return fbValues;
                            }
                        
                    

The code is structured into four functions

getValues

Gets values from the user.

displayValues

Displays the results of the calculation.

fizzBuzzAlgorithm

Logic/Algorithm layer of the App

displayFizzBuzzCount

Displays the count of how many times fizz, buzz, and fizzbuzz occured.