Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Virtual Keyboard</title>

    <style>
        #output {
            font-size: 2.3rem;
            padding-bottom: 2rem;
        }

        button {
            font-size: 2rem;
            background: lightblue;
            border: 2px solid #cccccc;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #keyboardDiv {
            display: inline-block;
            width: 750px;
            border: #cccccc 2px solid;
        }

        #keyboardDiv .row {
            display: flex;
        }

        #keyboardDiv .row button {
            flex: 1;
        }
    </style>
</head>

<body>

    <div id="output">OUTPUT: </div>

    <div id=keyboardDiv>

        <div class="row">
            <button>0</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
        </div>
        <div class="row">
            <button>a</button>
            <button>b</button>
            <button>c</button>
            <button>d</button>
            <button>e</button>
            <button>f</button>
            <button>g</button>
            <button>h</button>
            <button>i</button>
            <button>j</button>
        </div>
        <div class="row">
            <button>k</button>
            <button>l</button>
            <button>m</button>
            <button>n</button>
            <button>o</button>
            <button>p</button>
            <button>q</button>
            <button>r</button>
            <button>s</button>
        </div>
        <div class="row">
            <button>t</button>
            <button>u</button>
            <button>v</button>
            <button>w</button>
            <button>x</button>
            <button>y</button>
            <button>z</button>
        </div>
        <div class="row">
            <button>space</button>
            <button>caps</button>
        </div>


    </div>

</body>

<script>

    const keyboard = document.querySelector("#keyboardDiv");
    const output = document.querySelector("#output");
    const keys = document.querySelectorAll("button");

    keyboard.addEventListener("click", e => {
        let key = e.target.textContent;

        if (key.toLowerCase() === "space") key = " ";
        else if (key === "caps") {
            keys.forEach(key => {
                key.textContent = key.textContent.toUpperCase();
            });

            return;
        }
        else if (key === "CAPS") {
            keys.forEach(key => {
                key.textContent = key.textContent.toLowerCase();
            });

            return;
        }

        output.textContent += key;
        console.log(e.target.textContent);
    })

</script>
<!--

make a virtual keyboard
5 rows
1st row 0-9 numbers
2nd row A-j (10 columns)
3rd k-s (9 columns)
4 rest alphabets (7 columns)
5 space and caps (2 columns)

there should be just one event handler and that should be on the <div id=keyboardDiv></div>
Also clicking on caps should make the text of the keys on the kyboard toggle between upper case and lower case

Whatever you type should be displayed in another <div id="output"></div>


 -->

</html>