010 Final Source Code JavaScript Calculator

<html>

<head>
    <title>JavaScript</title>
    <style>
        .myCal {
            width: 350px;
            height: 350px;
            background-color: dimgray;
            padding: 5px;
        }
        
        .output {
            line-height: 40px;
            background-color: white;
            color: black;
            height: 40px;
            margin-bottom: 10px;
            font-size: 1.4em;
            text-align: right;
            font-family: monospace;
            padding: 0 8px;
        }
        
        .btn {
            width: 50px;
            height: 50px;
            padding: 7px;
            margin: 3px;
            background-color: azure;
            text-align: center;
            font-size: 1.5em;
            cursor: pointer;
            vertical-align: middle;
            line-height: 50px;
            display: inline-block;
        }
        
        .row {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div class="myCal"></div>
    <script>
        const myCalculator = document.querySelector(".myCal");
        const myKeys = [["1", "2", "3", "+"], ["4", "5", "6", "-"], ["7", "8", "9", "*"], ["C", "0", "=", "/"]];
        const myOper = ["+", "-", "*", "/"];
        let myOutput;

        document.addEventListener("DOMContentLoaded", function () {
            myOutput = document.createElement("div");
            myOutput.innerHTML = "0";
            myOutput.classList.add("output");
            myCalculator.appendChild(myOutput);
            for (let y = 0; y < myKeys.length; y++) {
                let div = document.createElement("div");
                div.classList.add("row");
                for (let x = 0; x < myKeys[y].length; x++) {
                    //console.log(myKeys[y][x]);
                    let btn = document.createElement("div");
                    btn.innerHTML = myKeys[y][x];
                    btn.classList.add("btn");
                    btn.addEventListener("click", btnHit);
                    div.appendChild(btn);
                }
                myCalculator.appendChild(div);
                console.log(div);
            }
        })

        function btnHit(e) {
            console.log(this.innerText);
            let myValue = this.innerText;
            let myCal = myOutput.innerText;
            if (myCal == "0") {
                myCal = "";
            }
            if (myValue == "=") {
                //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
                myCal = eval(myCal);
            }
            else {
                //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
                let lastChar = myCal.substring(myCal.length - 1);
                //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
                if (myOper.includes(myValue)) {
                    if (myOper.includes(lastChar)) {
                        myCal = myCal.substring(0, myCal.length - 1);
                    }
                    else {
                        myCal = eval(myCal);
                    }
                }
                myCal = myCal + myValue;
            }
            if (myValue == "C") {
                myCal = 0;
            }
            myOutput.innerText = myCal;
        }
    </script>
</body>

</html>