<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>Keyboard</title>
</head>

<body>
    <button id="bs" onclick="document.getElementById('keys').value = ''">clear</button>
    <br>
    <input type="text" id="keys" placeholder="enter text">
    <br>
    <button id="num" onclick="inter('1')">1</button><button id="num" onclick="inter('2')">2</button><button id="num"
        onclick="inter('3')">3</button><button id="num" onclick="inter('4')">4</button><button id="num"
        onclick="inter('5')">5</button><button id="num" onclick="inter('6')">6</button><button id="num"
        onclick="inter('7')">7</button><button id="num" onclick="inter('8')">8</button><button id="num"
        onclick="inter('9')">9</button><button id="num" onclick="inter('0')">0</button>
    <br>
    <button id="btn" onclick="inter('Q')">Q</button>
    <button id="btn" onclick="inter('W')">W</button>
    <button id="btn" onclick="inter('E')">E</button>
    <button id="btn" onclick="inter('R')">R</button>
    <button id="btn" onclick="inter('T')">T</button>
    <button id="btn" onclick="inter('Y')">Y</button>
    <button id="btn" onclick="inter('U')">U</button>
    <button id="btn" onclick="inter('I')">I</button>
    <button id="btn" onclick="inter('O')">O</button>
    <button id="btn" onclick="inter('P')">P</button>
    <br>
    <button id="btn" onclick="inter('A')">A</button>
    <button id="btn" onclick="inter('S')">S</button>
    <button id="btn" onclick="inter('D')">D</button>
    <button id="btn" onclick="inter('F')">F</button>
    <button id="btn" onclick="inter('G')">G</button>
    <button id="btn" onclick="inter('H')">H</button>
    <button id="btn" onclick="inter('J')">J</button>
    <button id="btn" onclick="inter('K')">K</button>
    <button id="btn" onclick="inter('L')">L</button>
    <br>
    <button id="btn" onclick="inter('.')">.</button>
    <button id="btn" onclick="inter('Z')">Z</button>
    <button id="btn" onclick="inter('X')">X</button>
    <button id="btn" onclick="inter('C')">C</button>
    <button id="btn" onclick="inter('V')">V</button>
    <button id="btn" onclick="inter('B')">B</button>
    <button id="btn" onclick="inter('N')">N</button>
    <button id="btn" onclick="inter('M')">M</button>
    <button id="btn" onclick="inter(',')">,</button>
    <br>
    <button id="btn" onclick="inter('!')">!</button>
    <button id="spacebar" onclick="inter(' ')">space</button>
    <button id="btn" onclick="inter('?')">?</button>
    <br>



</body>


    body {
        text-align: center;
        background-color: burlywood
    }

    #keys {
        height: 1.5in;
        width: 75%;
        text-align: center;
        font-size: 75px;
        border-style: solid;
        border-width: 5px;
        border-color: black;
        cursor: none;
        background-color: rgb(221, 204, 182);

    }

    #btn {
        height: 1.5in;
        width: 1.5in;
        font-size: 50px;
        background-color: gray;
        border-width: 1px;
        border-color: white;
        padding: 0px;
    }

    #spacebar {
        height: 1.5in;
        width: 7in;
        font-size: 50px;
        background-color: gray;
    }

    #bs {
        width: 10in;
        height: 30px;
        font-size: 20px;
        background-color: grey;
    }

    #num {
        height: 0.5in;
        width: 1.6in;
        background-color: rgb(36, 36, 36);
        border-width: 0.01px;
        border-color: white;
        color: white
    }

    var keys = document.getElementById('keys');

    function inter(lett) {
        keys.value = keys.value + lett;
        
        

    }

    function clear() {
        keys.value = ''
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.