Untitled

<!DOCTYPE html>
<html>
<head lang="eng">
    <meta charset="UTF-8">
    <title>Virtual Keyboard</title>
<style type="text/css">
    body {
        margin: 0 auto;
        margin-top: 1%;
        text-align: center;
    }
    #keyboard {
        padding-top: 1%;
    }
    form {
        padding-bottom: 1%;
        border-bottom: 1px solid #eee;
    }
    h1 {
        margin: 0;
        margin-bottom: 2px;
        padding: 0;
        border: 0;
        color: #696969;
    }
</style>
<script type="text/javascript">
    var caps = false; //Переменная, отвечающая за капс. Используется в функциях swichCaps() и input().
    var keys = document.getElementsByClassName('key'); //Массив буквенных кнопок.
    function swichVisible(element) { //Функция, принимающая в качестве аргумента id-шник элемента, который нужно скрыть/показать.
        if(document.getElementById(element).style.display == 'none')
            document.getElementById(element).style.display = 'block';
        else
            document.getElementById(element).style.display = 'none';
    }
    function input(symbol) { //Функция ввода в поле ввода. В качестве аргумента символ, который добавляется к строке. В зависимости от капса ЗАГЛАВНЫЙ или строчный.
        if(caps)
            document.getElementById('search').value += symbol.toUpperCase();
        else
            document.getElementById('search').value += symbol;
    }
    function swichCaps(element) { //Переключение капса и добавление класса нажатой кнопки к кнопке капса. Ебать я непонятен...
        caps = !caps;
        if(caps) {
            document.getElementById(element).classList.add('active');
            for (i = 0; i < keys.length; i++) {
                keys[i].style.textTransform = 'uppercase'; //Заглавные буквы при капсе.
            }
        }
        else {
            document.getElementById(element).classList.remove('active');
            for (i = 0; i < keys.length; i++) {
                keys[i].style.textTransform = 'lowercase'; //Прописные буквы.
            }
        }
    }
    function backspace() { //Бэкспейс. Ну хуле. Возвращает строку на элемент меньше.
        document.getElementById('search').value = document.getElementById('search').value.slice(0,-1);
    }


</script>
</head>
<body>
    <h1>Virtual Keyboard</h1>
    <form name="search" action="#" method="get">
        <input type="text" name="search" id="search" placeholder="Search"><button type="submit">GO</button><button type="button" onclick="swichVisible('keyboard')">Keyboard</button>
    </form>
    <div id="keyboard" style="display:none">
        <div>
            <button type="button" onClick="input('~')">~</button>
            <button type="button" onClick="input('1')">1</button>
            <button type="button" onClick="input('2')">2</button>
            <button type="button" onClick="input('3')">3</button>
            <button type="button" onClick="input('4')">4</button>
            <button type="button" onClick="input('5')">5</button>
            <button type="button" onClick="input('6')">6</button>
            <button type="button" onClick="input('7')">7</button>
            <button type="button" onClick="input('8')">8</button>
            <button type="button" onClick="input('9')">9</button>
            <button type="button" onClick="input('0')">0</button>
            <button type="button" onClick="input('-')">-</button>
            <button type="button" onClick="input('+')">+</button>
            <button type="button" onclick="backspace()">Backspace</button>
        </div>
        <div>
            <button type="button" class="key" onClick="input('q')">q</button>
            <button type="button" class="key" onClick="input('w')">w</button>
            <button type="button" class="key" onClick="input('e')">e</button>
            <button type="button" class="key" onClick="input('r')">r</button>
            <button type="button" class="key" onClick="input('t')">t</button>
            <button type="button" class="key" onClick="input('y')">y</button>
            <button type="button" class="key" onClick="input('u')">u</button>
            <button type="button" class="key" onClick="input('i')">i</button>
            <button type="button" class="key" onClick="input('o')">o</button>
            <button type="button" class="key" onClick="input('p')">p</button>
            <button type="button" class="key" onClick="input('{')">{</button>
            <button type="button" class="key" onClick="input('}')">}</button>
            <button type="button" class="key" onClick="input('\\')">\</button>
            <button type="button" class="key" onClick="input('|')">|</button>
        </div>
        <div>
            <button type="button" class="key" onClick="input('a')">a</button>
            <button type="button" class="key" onClick="input('s')">s</button>
            <button type="button" class="key" onClick="input('d')">d</button>
            <button type="button" class="key" onClick="input('f')">f</button>
            <button type="button" class="key" onClick="input('g')">g</button>
            <button type="button" class="key" onClick="input('h')">h</button>
            <button type="button" class="key" onClick="input('j')">j</button>
            <button type="button" class="key" onClick="input('k')">k</button>
            <button type="button" class="key" onClick="input('l')">l</button>
            <button type="button" class="key" onClick="input(';')">;</button>
            <button type="button" class="key" onClick="input('\')">'</button>
        </div>
        <div>
            <button type="button" class="key" onClick="input('z')">z</button>
            <button type="button" class="key" onClick="input('x')">x</button>
            <button type="button" class="key" onClick="input('c')">c</button>
            <button type="button" class="key" onClick="input('v')">v</button>
            <button type="button" class="key" onClick="input('b')">b</button>
            <button type="button" class="key" onClick="input('n')">n</button>
            <button type="button" class="key" onClick="input('m')">m</button>
            <button type="button" class="key" onClick="input(',')">,</button>
            <button type="button" class="key" onClick="input('.')">.</button>
            <button type="button" class="key" onClick="input('/')">/</button>
        </div>
        <div>
            <button type="button" id="capslock" onclick="swichCaps('capsLock')">Caps Lock</button>
            <button type="button" onclick="input(' ')">Space</button>
            <button type="button" onclick="document.getElementById('search').value = ''">Clear</button>
        </div>
    </div>
</body>
</html>