document.addEventListener('DOMContentLoaded', function (event) {


    const log = document.getElementById('textArea');
    let lineNum = 1;
    let columnCount = 0;
    updateCount();

    const newLine = document.createElement("Line");
    newLine.setAttribute("id", "line" + lineNum);

    log.appendChild(newLine);

    document.addEventListener('keydown', keyPress);

    function keyPress(event) {
        if (event.key == "Enter") {
            const lineBreak = document.createElement("br");
            log.appendChild(lineBreak);
            lineNum = lineNum + 1;

            columnCount = 0;



            const newLine = document.createElement("Line");
            newLine.setAttribute("id", "line" + lineNum);

            log.appendChild(newLine);

        } else if (event.key == "Shift") {
        } else if (event.key == "Control") {
        } else if (event.key == "Backspace") {
            const line = document.getElementById("line" + lineNum);

            if (line.textContent.length > 0) {
                line.textContent = line.textContent.slice(0, -1);

                columnCount = columnCount - 1;
            } else if (lineNum > 1) {
                columnCount = 0;
                line.remove();
                lineNum = lineNum - 1;
                log.lastElementChild.remove();
            }


        } else {
            const line = document.getElementById("line" + lineNum);
            line.textContent = line.textContent + event.key;
            // log.appendChild(text);
            columnCount = columnCount + 1;

        }
        updateCount();
    }


    function updateCount() {
        const lineCount = document.getElementById("count");
        lineCount.textContent = "Line Count: " + lineNum + " | Column Count: " + columnCount;
    }
})