Virtual Keyboard in HTML, CSS, JS

Before getting into scripts ,let us know about this topic "Virtual Keyboard in HTML,CSS,JS . Normally typing is done through the manual keyboard , virtual denotes that you can see but not able to feel .Now we make a keyboard in monitor.

Major prerequisites to build :

Input tag.
Button tag with onclick and a function and etc.
CSS Flexbox , Box-shadow, Border-radius ,etc.
Javascript functions.

Through the screenshot we can able to know how it is

HTML code:

<!DOCTYPE html>
<html>

<head>
    <title>keyboard.html</title>
    <link rel="stylesheet" href="keyboard.css">
    <script type="text/javascript" src="keyboard.js"></script>
</head>

<body>
    <div class="container">
        <input type="text" id="field" placeholder="enter a text">
        <div class="box">
            <div class="alphabets">
                <button onclick="letters('q')">q</button>
                <button onclick="letters('w')">w</button>
                <button onclick="letters('e')">e</button>
                <button onclick="letters('r')">r</button>
                <button onclick="letters('t')">t</button>
                <button onclick="letters('y')">y</button>
                <button onclick="letters('u')">u</button>
                <button onclick="letters('i')">i</button>
                <button onclick="letters('o')">o</button>
                <button onclick="letters('p')">p</button>
                <button onclick="letters('a')">a</button>
                <button onclick="letters('s')">s</button>
                <button onclick="letters('d')">d</button>
                <button onclick="letters('f')">f</button>
                <button onclick="letters('g')">g</button>
                <button onclick="letters('h')">h</button>
                <button onclick="letters('j')">j</button>
                <button onclick="letters('k')">k</button>
                <button onclick="letters('l')">l</button>
                <button onclick="letters('z')">z</button>
                <button onclick="letters('x')">x</button>
                <button onclick="letters('c')">c</button>
                <button onclick="letters('v')">v</button>
                <button onclick="letters('b')">b</button>
                <button onclick="letters('n')">n</button>
                <button onclick="letters('m')">m</button>
            </div>
            <div class="numbers">
                <button onclick="letters(1)">1</button>
                <button onclick="letters(2)">2</button>
                <button onclick="letters(3)">3</button>
                <button onclick="letters(4)">4</button>
                <button onclick="letters(5)">5</button>
                <button onclick="letters(6)">6</button>
                <button onclick="letters(7)">7</button>
                <button onclick="letters(8)">8</button>
                <button onclick="letters(9)">9</button>
                <button onclick="letters(0)">0</button>
            </div>
        </div>
    </div>

</body>

</html>

Explanation of HTML code:

Enclose a Input tag and Button tag within a Division (div)tag and create a class in division tag.
Button tag with a function.
Create a two class in two division tag respectively .One for alphabets and another for numbers.
While Onclick the button calls the function in js code.
The called function ,work of this function to type the actual keyword in Input field.
In the caller function we want to pass an parameters .For numbers , provide like this <button onclick="letters(9)">9</button>.
For string passing into a function ,provide like this
<button onclick="letters('a')">a</button>

Css code:

 .container {
        padding: 0;
        margin: auto auto;
        width: 80%;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        flex-direction: column;
        background-color: #ff0084;
        border-radius: 10px;
        box-shadow: 2px 2px 3px 3px grey;
    }
    
    input {
        border-radius: 10px;
        padding: 10px;
        width: 700px;
        margin-bottom: 20px;
        outline: none;
    }
    
    .box {
        display: flex;
        flex-wrap: wrap;
        border-radius: 10px;
    }
    
    .alphabets {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        justify-content: space-around;
    }
    
    .numbers {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .alphabets>button {
        border: none;
        color: black;
        background-color: aquamarine;
        width: 50px;
        height: 40px;
        margin: 1px;
    }
    
    .numbers>button {
        border: none;
        color: black;
        background-color: purple;
        color: white;
        width: 50px;
        height: 40px;
        margin: 1px;
    }
    
    button#space {
        flex-grow: 1;
    }

Css explanation:

Add property as FLEXBOX for class container and provide flex-direction: column .
Create flex for alphabets and numbers.

JS code:

function letters(letter) {
    var variable = document.getElementById("field").value;
    var store = concat(letter, variable);
    document.getElementById("field").value = store;
};

function concat(letter, variable) {
    variable += letter;
    return variable;
}

JS Explanation:

The code document.getElementById("Idname").value store in a var variable ".
The caller function pass an argument to called function and variable is concatenate to the argument and store in variable.
Now assign the variable to document.getElementById("Idname").value=variable.

Virtual Keyboard in HTML, CSS, JS

Major prerequisites to build :

HTML code:

Explanation of HTML code:

Css code:

Css explanation:

JS code:

JS Explanation:

1 Comments