CSS Keyboard | Create Keyboard Using HTML, CSS and JavaScript

March 5, 2022

Basic HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Keyboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <script src="app.js"></script>
</body>
</html>

HTML Code For Key Board:

<div class="keyboard_wrapper">
    <pre class="display"></pre>

    <div class="key">
        <div class="row">
            <span data-key="q">q</span>
            <span data-key="w">w</span>
            <span data-key="e">e</span>
            <span data-key="r">r</span>
            <span data-key="t">t</span>
            <span data-key="y">y</span>
            <span data-key="u">u</span>
            <span data-key="i">i</span>
            <span data-key="o">o</span>
            <span data-key="p">p</span>
        </div>

        <div class="row">
            <span data-key="a">a</span>
            <span data-key="s">s</span>
            <span data-key="d">d</span>
            <span data-key="f">f</span>
            <span data-key="g">g</span>
            <span data-key="h">h</span>
            <span data-key="j">j</span>
            <span data-key="k">k</span>
            <span data-key="l">l</span>
        </div>

        <div class="row">
            <span class="caps">caps</span>
            <span data-key="z">z</span>
            <span data-key="x">x</span>
            <span data-key="c">c</span>
            <span data-key="v">v</span>
            <span data-key="b">b</span>
            <span data-key="n">n</span>
            <span data-key="m">m</span>
            <span class="backspace">
                <i class="fa fa-angle-left"></i>
                <i class="fa fa-close"></i>
            </span>
        </div>

        <div class="row">
            <span class="space" data-key=" ">
                Space
            </span> 
        </div>
    </div>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background: #ececec;
    display: grid;
    place-content: center;
    min-height: 100vh;
    padding: 25px;
}

.keyboard_wrapper {
    width: 740px;
    padding: 25px;
    border-radius: 15px;
    box-shadow:
        -4px -4px 8px #fff,
        4px 4px 8px #0002;
}

.keyboard_wrapper .display {
    position: relative;
    font-size: 18px;
    font-family: inherit;
    height: 200px;
    border-radius: 15px;
    height: 200px;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
    border: 2px inset #fff;
    white-space: pre-wrap;
    box-shadow:
        inset 2px 2px 5px #0002,
        inset -2px -2px 5px #fff;
}

.keyboard_wrapper .display::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, #ffffff52, #0000001a);
    position: absolute;
    left: 0;
    top: 0;
}

.keyboard_wrapper .key {
    margin-top: 20px;
    text-transform: lowercase;
    user-select: none;
}

.keyboard_wrapper .key .row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 20px;
}

.keyboard_wrapper .key .row span {
    width: 50px;
    height: 50px;
    display: grid;
    place-content: center;
    border-radius: 8px;
    box-shadow:
        3px 3px 6px #0002,
        -3px -3px 6px #fff;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.3s;
}

.keyboard_wrapper .key .row span.caps,
.keyboard_wrapper .key .row span.backspace {
    width: calc(50px * 1.6);
    display: flex;
    gap: 5px;
    align-items: center;
}

.keyboard_wrapper .key .row span.space {
    width: calc(50px * 9.4);
}

.keyboard_wrapper .key .row span.active,
.keyboard_wrapper .key .row span:hover {
    border-color: orange;
    color: orangered;
}

.keyboard_wrapper .key .row span.active,
.keyboard_wrapper .key .row span:active {
    box-shadow:
        inset 3px 3px 6px #0002,
        inset -3px -3px 6px #fff;
}

.keyboard_wrapper .key.uppercase {
    text-transform: capitalize;
}

JavaScript Code:

let keys    = document.querySelectorAll('.keyboard_wrapper .key .row span'),
    keyPad  = document.querySelector('.keyboard_wrapper .key'),
    display = document.querySelector('.keyboard_wrapper .display');

if(keys && keyPad && display)
{
    let capsLockMode = false;
    keys.forEach(key=>
    {
        key.addEventListener('click', function()
        {
            // console.log(this.innerText);
            if(this.classList.contains('caps'))
            {
                this.classList.toggle('active');
                keyPad.classList.toggle('uppercase');

                capsLockMode ? capsLockMode = false : capsLockMode = true;
            }
            else if (this.classList.contains('backspace')){
                let str = display.innerText;
                display.innerText = str.substring(0, (str.length-1));
            }else{
                if(capsLockMode)
                {
                    display.innerText += this.dataset.key.toUpperCase();
                }else{
                    display.innerText += this.dataset.key.toLowerCase();
                }
            }
        });
    });
}

Live Output in Codepen:

CSS Keyboard | Create Keyboard Using HTML, CSS and JavaScript

Leave a Reply Cancel reply

Ads Blocker Detected!!!