Interactive Virtual Keyboard In JavaScript

Preview:

Description:

A JavaScript-powered interactive virtual keyboard that highlights the pressed keys while typing.

How to use it:

1. Code the HTML for the virtual keyboard.

<div class="bgKeyboard">
    <div class="startMsg">Press any key to Continue...</div>
    <div class="keyboard">
      <div class="row numberLine">
        <div class="blacktick">`</div>
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="zero">0</div>
        <div class="minus">-</div>
        <div class="equalsTo">=</div>
        <div class="backspace">BACKSPACE</div>
      </div>
      <div class="row alphaUpperLine">
        <div class="tab">TAB</div>
        <div class="q">Q</div>
        <div class="w">W</div>
        <div class="e">E</div>
        <div class="r">R</div>
        <div class="t">T</div>
        <div class="y">Y</div>
        <div class="u">U</div>
        <div class="i">I</div>
        <div class="o">O</div>
        <div class="p">P</div>
        <div class="openedBracket">[</div>
        <div class="closedBracket">]</div>
        <div class="backSlash">\</div>
      </div>
      <div class="row alphaMiddleLine">
        <div class="capslock">CAPS<br />LOCK</div>
        <div class="a">A</div>
        <div class="s">S</div>
        <div class="d">D</div>
        <div class="f">F</div>
        <div class="g">G</div>
        <div class="h">H</div>
        <div class="j">J</div>
        <div class="k">K</div>
        <div class="l">L</div>
        <div class="semicolon">;</div>
        <div class="quote">'</div>
        <div class="enter">ENTER</div>
      </div>
      <div class="row alphaLowerLine">
        <div class="lShift">SHIFT</div>
        <div class="z">Z</div>
        <div class="x">X</div>
        <div class="c">C</div>
        <div class="v">V</div>
        <div class="b">B</div>
        <div class="n">N</div>
        <div class="m">M</div>
        <div class="comma">,</div>
        <div class="fullstop">.</div>
        <div class="frontSlash">/</div>
        <div class="rShift">SHIFT</div>
      </div>
      <div class="row BottomLine">
        <div class="lCtrl">CTRL</div>
        <div class="lFunction">FN</div>
        <div class="win">WIN</div>
        <div class="lAlt">ALT</div>
        <div class="space">SPACE</div>
        <div class="rAlt">ALT</div>
        <div class="rFunction">FN</div>
        <div class="rCtrl">CTRL</div>
      </div>
    </div>
</div>

2. Place the main script at the bottom of the page.

<script src="script.js"></script>

3. The necessary CSS styles.

.bgKeyboard {
    width: 1008px;
    height: 350px;
    background-color: rgb(255, 219, 174);
    border-radius: 20px;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.startMsg {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s linear;
    font-size: 44px;
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.keyboard {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    margin-left: auto;
    margin-right: auto;
    width: 998px;
    height: 350;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.row {
    width: 100%;
    height: 60px;
}
.numberLine, .alphaUpperLine, .alphaMiddleLine, .alphaLowerLine, .BottomLine {
    margin: 5px 0 5px 0;
}
.row div {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    color: black;
    width: 55px;
    height: 55px;
    border: black 1px solid;
    border-radius: 20%;
    background: rgb(235, 232, 232);
    margin-left: 5px;
    margin-right: 5px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
div.backspace {
    width: 115px;
    border-radius: 10px;
    font-size: 18px;
}
div.tab, div.backSlash {
    width: 85px;
    border-radius: 10px;
}
div.capslock {
    width: 100px;
    border-radius: 10px;
}
div.enter {
    width: 137px;
    border-radius: 10px;
}
div.lShift {
    width: 130px;
    border-radius: 10px;
}
div.rShift {
    width: 174px;
    border-radius: 10px;
}
div.lCtrl {
    width: 65px;
    border-radius: 10px;
}
div.space {
    width: 388px;
    border-radius: 10px;
}
div.rCtrl {
    width: 174px;
    border-radius: 10px;
}
/*Key colors*/
div.blacktick, div.one, div.tab, div.q, div.a, div.lShift, div.z, div.lCtrl, div.win {
    background-color: rgb(255, 160, 122);
    border-color: rgb(184, 83, 44);
}
div.two, div.w, div.s, div.x {
    background-color: rgb(240, 128, 128);
    border-color: rgb(180, 81, 81);
    ;
}
div.three, div.e, div.d, div.c {
    background-color: rgb(119, 136, 153);
    border-color: rgb(44, 88, 133);
}
div.four, div.five, div.r, div.t, div.f, div.g, div.v, div.b {
    background-color: rgb(135, 206, 250);
    border-color: rgb(49, 144, 204);
}
div.six, div.seven, div.y, div.u, div.h, div.j, div.n, div.m {
    background-color: rgb(173, 216, 230);
    border-color: rgb(44, 119, 145);
}
div.eight, div.i, div.k, div.comma {
    background-color: rgb(144, 238, 144);
    border-color: rgb(60, 187, 60);
}
div.nine, div.o, div.l, div.fullstop {
    background-color: rgb(255, 184, 194);
    border-color: rgb(180, 70, 84);
}
div.zero, div.minus, div.equalsTo, div.backspace, div.p, div.openedBracket, div.closedBracket, div.backSlash, div.semicolon, div.quote, div.enter, div.frontSlash, div.rShift, div.rCtrl {
    background-color: rgb(255, 255, 155);
    border-color: rgb(192, 192, 52);
}
div.capslock {
    background-color: rgb(255, 222, 173);
    border-color: rgb(194, 138, 54);
}
div.rAlt, div.space, div.lAlt {
    background-color: rgb(32, 178, 170);
    border-color: rgb(9, 109, 104);
}
div.lFunction, div.rFunction {
    background-color: rgb(244, 164, 96);
    border-color: rgb(167, 91, 25);
}