document.querySelectorAll('.buttons>button').forEach((button) => {
    button.addEventListener('click', e => {
        const value = e.target.value;
        keypress(value);
    })
});

function keypress(str) {
    var textarea = document.getElementById("keytext");

    if (textarea.selectionStart || textarea.selectionStart == '0') {
        var txt = textarea.value;
        var startPos = textarea.selectionStart;
        var endPos = textarea.selectionEnd;
        if (str === 'del' || str === 'DEL') {
            if (startPos == endPos) {
                textarea.value = txt.substring(0, startPos - 1) + txt.substring(endPos, txt.length);
                textarea.focus();
                textarea.selectionStart = startPos - 1;
                textarea.selectionEnd = endPos - 1;
            } else {
                textarea.value = txt.substring(0, startPos) + txt.substring(endPos, txt.length);
                textarea.focus();
                textarea.selectionStart = startPos;
                textarea.selectionEnd = startPos;
            }
        } else if (str === 'cap') {
            document.querySelectorAll('.buttons>button').forEach((t) => {
                t.textContent = t.textContent.toUpperCase();
                t.value = t.value.toUpperCase();
            });
        } else if (str === 'CAP') {
            document.querySelectorAll('.buttons>button').forEach((t) => {
                t.textContent = t.textContent.toLowerCase();
                t.value = t.value.toLowerCase();
            });
        } else {
            textarea.value = txt.substring(0, startPos) + str + txt.substring(endPos, txt.length);
            textarea.focus();
            textarea.selectionStart = startPos + str.length;
            textarea.selectionEnd = startPos + str.length;
        }
    } else {
        textarea.value += str;
        textarea.focus();
    }

}