How to Create Keyboard Tester using HTML, CSS, JS

Keyboard piyush608

Creating a keyboard tester using HTML, CSS, and JavaScript involves creating a web page that detects and displays key presses. Here’s a step-by-step guide to building a simple keyboard tester:

Step-by-Step Guide

  1. Create the HTML Structure:
    • Create an index.html file with the following content:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Keyboard Tester</title>
</head>
<body>
<div class="container">
<div class="keyboard">
<div class="row row-1">
<div id="27" class="key key-1-1 esc">Esc</div>
<div id="112" class="key key-1-2">F1</div>
<div id="113" class="key key-1-3">F2</div>
<div id="114" class="key key-1-4">F3</div>
<div id="115" class="key key-1-5">F4</div>
<div id="116" class="key key-1-6">F5</div>
<div id="117" class="key key-1-7">F6</div>
<div id="118" class="key key-1-8">F7</div>
<div id="119" class="key key-1-9">F8</div>
<div id="120" class="key key-1-10">F9</div>
<div id="121" class="key key-1-11">F10</div>
<div id="122" class="key key-1-12">F11</div>
<div id="123" class="key key-1-13">F12</div>
<div id="" class="key key-1-14 sm">PrtSc</div>
<div id="45-left" class="key key-1-15 sm">Ins</div>
<div id="46-left" class="key key-1-16 sm">Del</div>
<div id="179" class="key key-1-17 num">⏵︎/⏸</div>
<div id="177" class="key key-1-18 num">⏴︎</div>
<div id="176" class="key key-1-19 num">⏵︎</div>
<div id="" class="key key-1-20 num">On</div>
</div>
<div class="row row-2">
<div id="192" class="key">
<div class="top">
<div>
`
</div>
</div>
<div class="bottom">
<div>
~
</div>
</div>
</div>
<div id="49" class="key">
<div class="top">
<div>
1
</div>
</div>
<div class="bottom">
<div>
!
</div>
</div>
</div>
<div id="50" class="key">
<div class="top">
<div>
2
</div>
</div>
<div class="bottom">
<div>
@
</div>
</div>
</div>
<div id="51" class="key">
<div class="top">
<div>
3
</div>
</div>
<div class="bottom">
<div>
#
</div>
</div>
</div>
<div id="52" class="key">
<div class="top">
<div>
4
</div>
</div>
<div class="bottom">
<div>
$
</div>
</div>
</div>
<div id="53" class="key">
<div class="top">
<div>
5
</div>
</div>
<div class="bottom">
<div>
%
</div>
</div>
</div>
<div id="54" class="key">
<div class="top">
<div>
6
</div>
</div>
<div class="bottom">
<div>
^
</div>
</div>
</div>
<div id="55" class="key">
<div class="top">
<div>
7
</div>
</div>
<div class="bottom">
<div>
&
</div>
</div>
</div>
<div id="56" class="key">
<div class="top">
<div>
8
</div>
</div>
<div class="bottom">
<div>
*
</div>
</div>
</div>
<div id="57" class="key">
<div class="top">
<div>
9
</div>
</div>
<div class="bottom">
<div>
(
</div>
</div>
</div>
<div id="48" class="key">
<div class="top">
<div>
0
</div>
</div>
<div class="bottom">
<div>
)
</div>
</div>
</div>
<div id="189" class="key">
<div class="top">
<div>
-
</div>
</div>
<div class="bottom">
<div>
_
</div>
</div>
</div>
<div id="187" class="key">
<div class="top">
<div>
=
</div>
</div>
<div class="bottom">
<div>
+
</div>
</div>
</div>
<div id="8" class="key key-2-14 backspace">Backspace</div>
<div id="144" class="key key-2-15 num numLock">NumLk</div>
<div id="111" class="key key-2-16 num">/</div>
<div id="106" class="key key-2-17 num">*</div>
<div id="109" class="key key-2-18 num">-</div>
</div>
<div class="row row-3">
<div id="9" class="key key-3-1 tab">Tab</div>
<div id="81" class="key key-3-2">Q</div>
<div id="87" class="key key-3-3">W</div>
<div id="69" class="key key-3-4">E</div>
<div id="82" class="key key-3-5">R</div>
<div id="84" class="key key-3-6">T</div>
<div id="89" class="key key-3-7">Y</div>
<div id="85" class="key key-3-8">U</div>
<div id="73" class="key key-3-9">I</div>
<div id="79" class="key key-3-10">O</div>
<div id="80" class="key key-3-11">P</div>
<div id="219" class="key">
<div class="top">
<div>
{
</div>
</div>
<div class="bottom">
<div>
[
</div>
</div>
</div>
<div id="221" class="key">
<div class="top">
<div>
}
</div>
</div>
<div class="bottom">
<div>
]
</div>
</div>
</div>
<div id="220" class="key">
<div class="top">
<div>
|
</div>
</div>
<div class="bottom">
<div>
\
</div>
</div>
</div>
<div id="103" class="key key-3-15 num">7</div>
<div id="104" class="key key-3-16 num">8</div>
<div id="105" class="key key-3-17 num">9</div>
<div id="107" class="key key-3-18 plus num">+</div>
</div>
<div class="row row-4">
<div id="20" class="key key-4-1 caplock">CapsLk</div>
<div id="65" class="key key-4-2">A</div>
<div id="83" class="key key-4-3">S</div>
<div id="68" class="key key-4-4">D</div>
<div id="70" class="key key-4-5">F</div>
<div id="71" class="key key-4-6">G</div>
<div id="72" class="key key-4-7">H</div>
<div id="74" class="key key-4-8">J</div>
<div id="75" class="key key-4-9">K</div>
<div id="76" class="key key-4-10">L</div>
<div id="186" class="key">
<div class="top">
<div>
:
</div>
</div>
<div class="bottom">
<div>
;
</div>
</div>
</div>
<div id="222" class="key">
<div class="top">
<div>
"
</div>
</div>
<div class="bottom">
<div>
'
</div>
</div>
</div>
<div id="13-left" class="key key-4-13 enter">Enter</div>
<div id="100" class="key key-4-14 num">4</div>
<div id="101" class="key key-4-15 num">5</div>
<div id="102" class="key key-4-16 num">6</div>
</div>
<div class="row row-5">
<div id="16-left" class="key key-5-1 shift">Shift</div>
<div id="90" class="key key-5-2">Z</div>
<div id="88" class="key key-5-3">X</div>
<div id="67" class="key key-5-4">C</div>
<div id="86" class="key key-5-5">V</div>
<div id="66" class="key key-5-6">B</div>
<div id="78" class="key key-5-7">N</div>
<div id="77" class="key key-5-8">M</div>
<div id="188" class="key">
<div class="top">
<div>
<
</div>
</div>
<div class="bottom">
<div>
,
</div>
</div>
</div>
<div id="190" class="key">
<div class="top">
<div>
>
</div>
</div>
<div class="bottom">
<div>
.
</div>
</div>
</div>
<div id="191" class="key">
<div class="top">
<div>
?
</div>
</div>
<div class="bottom">
<div>
/
</div>
</div>
</div>
<div id="16-right" class="key key-5-12 shift">Shift</div>
<div id="97" class="key key-5-13 num">1</div>
<div id="98" class="key key-5-14 num">2</div>
<div id="99" class="key key-5-15 num">3</div>
<div id="13-right" class="key key-5-16 num-enter num sm">Enter</div>
</div>
<div class="row row-6">
<div id="17-left" class="key key-6-1 ctrl">Ctrl</div>
<div id="" class="key key-6-2 fn">Fn</div>
<div id="91" class="key key-6-3">Win</div>
<div id="18-left" class="key key-6-4 Alt">Alt</div>
<div id="32" class="key key-6-5 space"></div>
<div id="18-right" class="key key-6-6">Alt</div>
<div id="17-right" class="key key-6-7 ctrl">Ctrl</div>
<div id="37" class="key key-6-8 left">left</div>
<div id="upDown" class="">
<div class="top up">
<div id="38" class="smallKey">Up</div>
</div>
<div class="bottom down">
<div id="40" class="smallKey">Down</div>
</div>
</div>
<div id="39" class="key key-6-10 right">Right</div>
<div id="96" class="key key-6-11 zero">0</div>
<div id="110" class="key key-6-12 num">.</div>
</div>
</div>
</div>
<div id="insert">
<div class="keys">
Press any key.
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Keyboard Tester</title> </head> <body> <div class="container"> <div class="keyboard"> <div class="row row-1"> <div id="27" class="key key-1-1 esc">Esc</div> <div id="112" class="key key-1-2">F1</div> <div id="113" class="key key-1-3">F2</div> <div id="114" class="key key-1-4">F3</div> <div id="115" class="key key-1-5">F4</div> <div id="116" class="key key-1-6">F5</div> <div id="117" class="key key-1-7">F6</div> <div id="118" class="key key-1-8">F7</div> <div id="119" class="key key-1-9">F8</div> <div id="120" class="key key-1-10">F9</div> <div id="121" class="key key-1-11">F10</div> <div id="122" class="key key-1-12">F11</div> <div id="123" class="key key-1-13">F12</div> <div id="" class="key key-1-14 sm">PrtSc</div> <div id="45-left" class="key key-1-15 sm">Ins</div> <div id="46-left" class="key key-1-16 sm">Del</div> <div id="179" class="key key-1-17 num">⏵︎/⏸</div> <div id="177" class="key key-1-18 num">⏴︎</div> <div id="176" class="key key-1-19 num">⏵︎</div> <div id="" class="key key-1-20 num">On</div> </div> <div class="row row-2"> <div id="192" class="key"> <div class="top"> <div> ` </div> </div> <div class="bottom"> <div> ~ </div> </div> </div> <div id="49" class="key"> <div class="top"> <div> 1 </div> </div> <div class="bottom"> <div> ! </div> </div> </div> <div id="50" class="key"> <div class="top"> <div> 2 </div> </div> <div class="bottom"> <div> @ </div> </div> </div> <div id="51" class="key"> <div class="top"> <div> 3 </div> </div> <div class="bottom"> <div> # </div> </div> </div> <div id="52" class="key"> <div class="top"> <div> 4 </div> </div> <div class="bottom"> <div> $ </div> </div> </div> <div id="53" class="key"> <div class="top"> <div> 5 </div> </div> <div class="bottom"> <div> % </div> </div> </div> <div id="54" class="key"> <div class="top"> <div> 6 </div> </div> <div class="bottom"> <div> ^ </div> </div> </div> <div id="55" class="key"> <div class="top"> <div> 7 </div> </div> <div class="bottom"> <div> & </div> </div> </div> <div id="56" class="key"> <div class="top"> <div> 8 </div> </div> <div class="bottom"> <div> * </div> </div> </div> <div id="57" class="key"> <div class="top"> <div> 9 </div> </div> <div class="bottom"> <div> ( </div> </div> </div> <div id="48" class="key"> <div class="top"> <div> 0 </div> </div> <div class="bottom"> <div> ) </div> </div> </div> <div id="189" class="key"> <div class="top"> <div> - </div> </div> <div class="bottom"> <div> _ </div> </div> </div> <div id="187" class="key"> <div class="top"> <div> = </div> </div> <div class="bottom"> <div> + </div> </div> </div> <div id="8" class="key key-2-14 backspace">Backspace</div> <div id="144" class="key key-2-15 num numLock">NumLk</div> <div id="111" class="key key-2-16 num">/</div> <div id="106" class="key key-2-17 num">*</div> <div id="109" class="key key-2-18 num">-</div> </div> <div class="row row-3"> <div id="9" class="key key-3-1 tab">Tab</div> <div id="81" class="key key-3-2">Q</div> <div id="87" class="key key-3-3">W</div> <div id="69" class="key key-3-4">E</div> <div id="82" class="key key-3-5">R</div> <div id="84" class="key key-3-6">T</div> <div id="89" class="key key-3-7">Y</div> <div id="85" class="key key-3-8">U</div> <div id="73" class="key key-3-9">I</div> <div id="79" class="key key-3-10">O</div> <div id="80" class="key key-3-11">P</div> <div id="219" class="key"> <div class="top"> <div> { </div> </div> <div class="bottom"> <div> [ </div> </div> </div> <div id="221" class="key"> <div class="top"> <div> } </div> </div> <div class="bottom"> <div> ] </div> </div> </div> <div id="220" class="key"> <div class="top"> <div> | </div> </div> <div class="bottom"> <div> \ </div> </div> </div> <div id="103" class="key key-3-15 num">7</div> <div id="104" class="key key-3-16 num">8</div> <div id="105" class="key key-3-17 num">9</div> <div id="107" class="key key-3-18 plus num">+</div> </div> <div class="row row-4"> <div id="20" class="key key-4-1 caplock">CapsLk</div> <div id="65" class="key key-4-2">A</div> <div id="83" class="key key-4-3">S</div> <div id="68" class="key key-4-4">D</div> <div id="70" class="key key-4-5">F</div> <div id="71" class="key key-4-6">G</div> <div id="72" class="key key-4-7">H</div> <div id="74" class="key key-4-8">J</div> <div id="75" class="key key-4-9">K</div> <div id="76" class="key key-4-10">L</div> <div id="186" class="key"> <div class="top"> <div> : </div> </div> <div class="bottom"> <div> ; </div> </div> </div> <div id="222" class="key"> <div class="top"> <div> " </div> </div> <div class="bottom"> <div> ' </div> </div> </div> <div id="13-left" class="key key-4-13 enter">Enter</div> <div id="100" class="key key-4-14 num">4</div> <div id="101" class="key key-4-15 num">5</div> <div id="102" class="key key-4-16 num">6</div> </div> <div class="row row-5"> <div id="16-left" class="key key-5-1 shift">Shift</div> <div id="90" class="key key-5-2">Z</div> <div id="88" class="key key-5-3">X</div> <div id="67" class="key key-5-4">C</div> <div id="86" class="key key-5-5">V</div> <div id="66" class="key key-5-6">B</div> <div id="78" class="key key-5-7">N</div> <div id="77" class="key key-5-8">M</div> <div id="188" class="key"> <div class="top"> <div> < </div> </div> <div class="bottom"> <div> , </div> </div> </div> <div id="190" class="key"> <div class="top"> <div> > </div> </div> <div class="bottom"> <div> . </div> </div> </div> <div id="191" class="key"> <div class="top"> <div> ? </div> </div> <div class="bottom"> <div> / </div> </div> </div> <div id="16-right" class="key key-5-12 shift">Shift</div> <div id="97" class="key key-5-13 num">1</div> <div id="98" class="key key-5-14 num">2</div> <div id="99" class="key key-5-15 num">3</div> <div id="13-right" class="key key-5-16 num-enter num sm">Enter</div> </div> <div class="row row-6"> <div id="17-left" class="key key-6-1 ctrl">Ctrl</div> <div id="" class="key key-6-2 fn">Fn</div> <div id="91" class="key key-6-3">Win</div> <div id="18-left" class="key key-6-4 Alt">Alt</div> <div id="32" class="key key-6-5 space"></div> <div id="18-right" class="key key-6-6">Alt</div> <div id="17-right" class="key key-6-7 ctrl">Ctrl</div> <div id="37" class="key key-6-8 left">left</div> <div id="upDown" class=""> <div class="top up"> <div id="38" class="smallKey">Up</div> </div> <div class="bottom down"> <div id="40" class="smallKey">Down</div> </div> </div> <div id="39" class="key key-6-10 right">Right</div> <div id="96" class="key key-6-11 zero">0</div> <div id="110" class="key key-6-12 num">.</div> </div> </div> </div> <div id="insert"> <div class="keys"> Press any key. </div> </div> <script src="script.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Keyboard Tester</title>
  </head>
  <body>
    <div class="container">
      <div class="keyboard">
        <div class="row row-1">
          <div id="27" class="key key-1-1 esc">Esc</div>
          <div id="112" class="key key-1-2">F1</div>
          <div id="113" class="key key-1-3">F2</div>
          <div id="114" class="key key-1-4">F3</div>
          <div id="115" class="key key-1-5">F4</div>
          <div id="116" class="key key-1-6">F5</div>
          <div id="117" class="key key-1-7">F6</div>
          <div id="118" class="key key-1-8">F7</div>
          <div id="119" class="key key-1-9">F8</div>
          <div id="120" class="key key-1-10">F9</div>
          <div id="121" class="key key-1-11">F10</div>
          <div id="122" class="key key-1-12">F11</div>
          <div id="123" class="key key-1-13">F12</div>
          <div id="" class="key key-1-14 sm">PrtSc</div>
          <div id="45-left" class="key key-1-15 sm">Ins</div>
          <div id="46-left" class="key key-1-16 sm">Del</div>
          <div id="179" class="key key-1-17 num">⏵︎/⏸</div>
          <div id="177" class="key key-1-18 num">⏴︎</div>
          <div id="176" class="key key-1-19 num">⏵︎</div>
          <div id="" class="key key-1-20 num">On</div>
        </div>
        <div class="row row-2">
          <div id="192" class="key">
            <div class="top">
              <div>
                `
              </div>
            </div>
            <div class="bottom">
              <div>
                ~
              </div>
            </div>
          </div>
          <div id="49" class="key">
            <div class="top">
              <div>
                1
              </div>
            </div>
            <div class="bottom">
              <div>
                !
              </div>
            </div>
          </div>
          <div id="50" class="key">
            <div class="top">
              <div>
                2
              </div>
            </div>
            <div class="bottom">
              <div>
                @
              </div>
            </div>
          </div>
          <div id="51" class="key">
            <div class="top">
              <div>
                3
              </div>
            </div>
            <div class="bottom">
              <div>
                #
              </div>
            </div>
          </div>
          <div id="52" class="key">
            <div class="top">
              <div>
                4
              </div>
            </div>
            <div class="bottom">
              <div>
                $
              </div>
            </div>
          </div>
          <div id="53" class="key">
            <div class="top">
              <div>
                5
              </div>
            </div>
            <div class="bottom">
              <div>
                %
              </div>
            </div>
          </div>
          <div id="54" class="key">
            <div class="top">
              <div>
                6
              </div>
            </div>
            <div class="bottom">
              <div>
                ^
              </div>
            </div>
          </div>
          <div id="55" class="key">
            <div class="top">
              <div>
                7
              </div>
            </div>
            <div class="bottom">
              <div>
                &
              </div>
            </div>
          </div>
          <div id="56" class="key">
            <div class="top">
              <div>
                8
              </div>
            </div>
            <div class="bottom">
              <div>
                *
              </div>
            </div>
          </div>
          <div id="57" class="key">
            <div class="top">
              <div>
                9
              </div>
            </div>
            <div class="bottom">
              <div>
                (
              </div>
            </div>
          </div>
          <div id="48" class="key">
            <div class="top">
              <div>
                0
              </div>
            </div>
            <div class="bottom">
              <div>
                )
              </div>
            </div>
          </div>
          <div id="189" class="key">
            <div class="top">
              <div>
                -
              </div>
            </div>
            <div class="bottom">
              <div>
                _
              </div>
            </div>
          </div>
          <div id="187" class="key">
            <div class="top">
              <div>
                =
              </div>
            </div>
            <div class="bottom">
              <div>
                +
              </div>
            </div>
          </div>
          <div id="8" class="key key-2-14 backspace">Backspace</div>
          <div id="144" class="key key-2-15 num numLock">NumLk</div>
          <div id="111" class="key key-2-16 num">/</div>
          <div id="106" class="key key-2-17 num">*</div>
          <div id="109" class="key key-2-18 num">-</div>
        </div>
        <div class="row row-3">
          <div id="9" class="key key-3-1 tab">Tab</div>
          <div id="81" class="key key-3-2">Q</div>
          <div id="87" class="key key-3-3">W</div>
          <div id="69" class="key key-3-4">E</div>
          <div id="82" class="key key-3-5">R</div>
          <div id="84" class="key key-3-6">T</div>
          <div id="89" class="key key-3-7">Y</div>
          <div id="85" class="key key-3-8">U</div>
          <div id="73" class="key key-3-9">I</div>
          <div id="79" class="key key-3-10">O</div>
          <div id="80" class="key key-3-11">P</div>
          <div id="219" class="key">
            <div class="top">
              <div>
                {
              </div>
            </div>
            <div class="bottom">
              <div>
                [
              </div>
            </div>
          </div>
          <div id="221" class="key">
            <div class="top">
              <div>
              }
              </div>
            </div>
            <div class="bottom">
              <div>
                ]
              </div>
            </div>
          </div>
          <div id="220" class="key">
            <div class="top">
              <div>
                |
              </div>
            </div>
            <div class="bottom">
              <div>
                \
              </div>
            </div>
          </div>
          <div id="103" class="key key-3-15 num">7</div>
          <div id="104" class="key key-3-16 num">8</div>
          <div id="105" class="key key-3-17 num">9</div>
          <div id="107" class="key key-3-18 plus num">+</div>
        </div>
        <div class="row row-4">
          <div id="20" class="key key-4-1 caplock">CapsLk</div>
          <div id="65" class="key key-4-2">A</div>
          <div id="83" class="key key-4-3">S</div>
          <div id="68" class="key key-4-4">D</div>
          <div id="70" class="key key-4-5">F</div>
          <div id="71" class="key key-4-6">G</div>
          <div id="72" class="key key-4-7">H</div>
          <div id="74" class="key key-4-8">J</div>
          <div id="75" class="key key-4-9">K</div>
          <div id="76" class="key key-4-10">L</div>
          <div id="186" class="key">
            <div class="top">
              <div>
                :
              </div>
            </div>
            <div class="bottom">
              <div>
                ;
              </div>
            </div>
          </div>
          <div id="222" class="key">
            <div class="top">
              <div>
                "
              </div>
            </div>
            <div class="bottom">
              <div>
                '
              </div>
            </div>
          </div>
          <div id="13-left" class="key key-4-13 enter">Enter</div>
          <div id="100" class="key key-4-14 num">4</div>
          <div id="101" class="key key-4-15 num">5</div>
          <div id="102" class="key key-4-16 num">6</div>
        </div>
        <div class="row row-5">
          <div id="16-left" class="key key-5-1 shift">Shift</div>
          <div id="90" class="key key-5-2">Z</div>
          <div id="88" class="key key-5-3">X</div>
          <div id="67" class="key key-5-4">C</div>
          <div id="86" class="key key-5-5">V</div>
          <div id="66" class="key key-5-6">B</div>
          <div id="78" class="key key-5-7">N</div>
          <div id="77" class="key key-5-8">M</div>
          <div id="188" class="key">
            <div class="top">
              <div>
                <
              </div>
            </div>
            <div class="bottom">
              <div>
                ,
              </div>
            </div>
          </div>
          <div id="190" class="key">
            <div class="top">
              <div>
                >
              </div>
            </div>
            <div class="bottom">
              <div>
                .
              </div>
            </div>
          </div>
          <div id="191" class="key">
            <div class="top">
              <div>
                ?
              </div>
            </div>
            <div class="bottom">
              <div>
                /
              </div>
            </div>
          </div>
          <div id="16-right" class="key key-5-12 shift">Shift</div>
          <div id="97" class="key key-5-13 num">1</div>
          <div id="98" class="key key-5-14 num">2</div>
          <div id="99" class="key key-5-15 num">3</div>
          <div id="13-right" class="key key-5-16 num-enter num sm">Enter</div>
        </div>
        <div class="row row-6">
          <div id="17-left" class="key key-6-1 ctrl">Ctrl</div>
          <div id="" class="key key-6-2 fn">Fn</div>
          <div id="91" class="key key-6-3">Win</div>
          <div id="18-left" class="key key-6-4 Alt">Alt</div>
          <div id="32" class="key key-6-5 space"></div>
          <div id="18-right" class="key key-6-6">Alt</div>
          <div id="17-right" class="key key-6-7 ctrl">Ctrl</div>
          <div id="37" class="key key-6-8 left">left</div>
          <div id="upDown" class="">
            <div class="top up">
              <div id="38" class="smallKey">Up</div>
            </div>
            <div class="bottom down">
              <div id="40" class="smallKey">Down</div>
            </div>
          </div>
          <div id="39" class="key key-6-10 right">Right</div>
          <div id="96" class="key key-6-11 zero">0</div>
          <div id="110" class="key key-6-12 num">.</div>
        </div>
      </div>
    </div>
    <div id="insert">
      <div class="keys">
        Press any key.
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

 

Style the Keyboard Tester:

  • Create a styles.css file with the following content:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #58aac65a;
font-family: 'Muli', sans-serif;
display: grid;
place-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.keys {
border: 1px solid #999999;
background-color: rgb(56, 56, 56);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
flex-direction: column;
margin: 10px;
min-width: 150px;
color: white;
position: relative;
border-radius: 8px;
}
.keys small {
position: absolute;
top: -24px;
left: 0;
text-align: center;
width: 100%;
color: #000000ad;
font-size: 14px;
}
.container {
border: 2px solid black;
border-radius: 16px;
padding: 1.5em 2rem;
margin: auto;
background-color: rgb(211,211,211);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.row {
display: flex;
justify-content: start;
align-items: center;
}
.row-1 > .key {
width: 44px;
}
.row-3, .row-5, .row-6 {
position: relative;
}
.key {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 50px;
height: 40px;
background-color:rgb(56, 56, 56);
color: #fff;
margin: .2em;
margin-bottom: .2em;
border-radius: 8px;
}
.space {
width: calc(250px + 1.6em);
}
.shift {
width: calc(100px + 1.1em);
}
.enter {
width: calc(88px);
}
.esc {
width: 50px !important;
}
.backspace {
width: 73px !important;
font-size: 0.8em;
}
.plus, .num-enter {
height: calc(80px + 0.4em) !important;
position: absolute;
right: 0;
}
.plus {
bottom: -46px;
}
.num-enter {
height: calc(80px + 0.8em) !important;
font-size: 0.8em;
bottom: -49px;
}
.num {
width: 40px !important;
}
.numLock {
font-size: 0.7em;
width: 43px !important;
}
.tab {
width: 72px;
}
.caplock {
width: 90px;
}
.zero {
width: calc(80px + 0.4em);
}
.pipe {
width: 55px;
}
.ctrl, .fn {
width: 56px;
}
.left, .right {
width: 52px;
}
.test {
background-color: #46d476 !important;
color: #000 !important;
animation: keyPress .5s ease;
}
#upDown {
display: flex;
flex-direction: column;
justify-content: space-around;
color: #fff;
font-size: 0.7em;
text-align: center;
max-height: 50px;
width: 58px;
}
#upDown > div {
background-color: rgb(56, 56, 56);
margin: 0.15em;
padding: 2.5px
}
#upDown > div.top {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#upDown > div.bottom {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
@keyframes keyPress {
0% {
transform: scale(1);
}
50% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #58aac65a; font-family: 'Muli', sans-serif; display: grid; place-items: center; height: 100vh; overflow: hidden; margin: 0; } .keys { border: 1px solid #999999; background-color: rgb(56, 56, 56); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; font-size: 20px; font-weight: bold; padding: 20px; flex-direction: column; margin: 10px; min-width: 150px; color: white; position: relative; border-radius: 8px; } .keys small { position: absolute; top: -24px; left: 0; text-align: center; width: 100%; color: #000000ad; font-size: 14px; } .container { border: 2px solid black; border-radius: 16px; padding: 1.5em 2rem; margin: auto; background-color: rgb(211,211,211); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .row { display: flex; justify-content: start; align-items: center; } .row-1 > .key { width: 44px; } .row-3, .row-5, .row-6 { position: relative; } .key { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 50px; height: 40px; background-color:rgb(56, 56, 56); color: #fff; margin: .2em; margin-bottom: .2em; border-radius: 8px; } .space { width: calc(250px + 1.6em); } .shift { width: calc(100px + 1.1em); } .enter { width: calc(88px); } .esc { width: 50px !important; } .backspace { width: 73px !important; font-size: 0.8em; } .plus, .num-enter { height: calc(80px + 0.4em) !important; position: absolute; right: 0; } .plus { bottom: -46px; } .num-enter { height: calc(80px + 0.8em) !important; font-size: 0.8em; bottom: -49px; } .num { width: 40px !important; } .numLock { font-size: 0.7em; width: 43px !important; } .tab { width: 72px; } .caplock { width: 90px; } .zero { width: calc(80px + 0.4em); } .pipe { width: 55px; } .ctrl, .fn { width: 56px; } .left, .right { width: 52px; } .test { background-color: #46d476 !important; color: #000 !important; animation: keyPress .5s ease; } #upDown { display: flex; flex-direction: column; justify-content: space-around; color: #fff; font-size: 0.7em; text-align: center; max-height: 50px; width: 58px; } #upDown > div { background-color: rgb(56, 56, 56); margin: 0.15em; padding: 2.5px } #upDown > div.top { border-top-left-radius: 8px; border-top-right-radius: 8px; } #upDown > div.bottom { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } @keyframes keyPress { 0% { transform: scale(1); } 50% { transform: scale(.9); } 100% { transform: scale(1); } }
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
 
}

body {
  background-color: #58aac65a;
  font-family: 'Muli', sans-serif;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.keys {
  border: 1px solid #999999;
  background-color: rgb(56, 56, 56);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  flex-direction: column;
  margin: 10px;
  min-width: 150px;
  color: white;
  position: relative;
  border-radius: 8px;
}

.keys small {
  position: absolute;
  top: -24px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #000000ad;
  font-size: 14px;
}
.container {
  border: 2px solid black;
  border-radius: 16px;
  padding: 1.5em 2rem;
  margin: auto;
  background-color: rgb(211,211,211);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.row {
  display: flex;
  justify-content: start;
  align-items: center;
}
.row-1 > .key {
  width: 44px;
}
.row-3, .row-5, .row-6 {
  position: relative;
}
.key {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 50px;
  height: 40px;
  background-color:rgb(56, 56, 56);
  color: #fff;
  margin: .2em;
  margin-bottom: .2em;
  border-radius: 8px;
}

.space {
  width: calc(250px + 1.6em);
}
.shift {
  width: calc(100px + 1.1em);
}
.enter {
  width: calc(88px);
}
.esc {
  width: 50px !important;
}
.backspace {
  width: 73px !important;
  font-size: 0.8em;
}
.plus, .num-enter {
  height: calc(80px + 0.4em) !important;
  position: absolute;
  right: 0;
}
.plus {
  bottom: -46px;
}
.num-enter {
  height: calc(80px + 0.8em) !important;
  font-size: 0.8em;
  bottom: -49px;
}
.num {
  width: 40px !important;
}
.numLock {
  font-size: 0.7em;
  width: 43px !important;
}
.tab {
  width: 72px;
}
.caplock {
  width: 90px;
}
.zero {
  width: calc(80px + 0.4em);
}
.pipe {
  width: 55px;
}
.ctrl, .fn {
  width: 56px;
}
.left, .right {
  width: 52px;
}

.test {
  background-color: #46d476 !important;
  color: #000 !important;
  animation: keyPress .5s ease;
}
#upDown {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #fff;
  font-size: 0.7em;
  text-align: center;
  max-height: 50px;
  width: 58px;
}
#upDown > div {
  background-color: rgb(56, 56, 56);
  margin: 0.15em;
  padding: 2.5px
}
#upDown > div.top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
#upDown > div.bottom {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

@keyframes keyPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}

 

Add JavaScript Functionality:

  • Create a script.js file with the following content:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const insert = document.getElementById('insert')
// const key = document.querySelectorAll('.key');
window.addEventListener('keydown', (event) => {
insert.innerHTML = `
<div class="keys">
${event.key === ' ' ? 'Space' : event.key}
<small>event.key</small>
</div>
<div class="keys">
${event.keyCode}
<small>event.keyCode</small>
</div>
<div class="keys">
${event.code}
<small>event.code</small>
</div>
`
switch (event.keyCode) {
case 8:
document.getElementById('8').classList.add('test');
break;
case 9:
document.getElementById('9').classList.add('test');
break;
case 13:
if(event.code === 'Enter') {
document.getElementById('13-left').classList.add('test');
break;
} else {
document.getElementById('13-right').classList.add('test');
break;
}
case 16:
if(event.code === 'ShiftLeft') {
document.getElementById('16-left').classList.add('test');
break;
} else {
document.getElementById('16-right').classList.add('test');
break;
}
case 17:
if(event.code === 'ControlLeft') {
document.getElementById('17-left').classList.add('test');
break;
} else {
document.getElementById('17-right').classList.add('test');
break;
}
case 18:
if(event.code === 'AltLeft') {
document.getElementById('18-left').classList.add('test');
break;
} else {
document.getElementById('18-right').classList.add('test');
break;
}
case 20:
document.getElementById('20').classList.add('test');
break;
case 32:
document.getElementById('32').classList.add('test');
break;
case 35:
document.getElementById('35').classList.add('test');
break;
case 37:
document.getElementById('37').classList.add('test');
break;
case 38:
document.querySelector('.up').classList.add('test');
break;
case 39:
document.getElementById('39').classList.add('test');
break;
case 40:
document.querySelector('.down').classList.add('test');
break;
case 45:
if(event.code === 'Insert') {
document.getElementById('45-left').classList.add('test');
break;
} else {
document.getElementById('96').classList.add('test');
break;
}
case 46:
if(event.code === 'Delete') {
document.getElementById('46-left').classList.add('test');
break;
} else {
document.getElementById('110').classList.add('test');
break;
}
case 48:
document.getElementById('48').classList.add('test');
break;
case 49:
document.getElementById('49').classList.add('test');
break;
case 50:
document.getElementById('50').classList.add('test');
break;
case 51:
document.getElementById('51').classList.add('test');
break;
case 52:
document.getElementById('52').classList.add('test');
break;
case 53:
document.getElementById('53').classList.add('test');
break;
case 54:
document.getElementById('54').classList.add('test');
break;
case 55:
document.getElementById('55').classList.add('test');
break;
case 56:
document.getElementById('56').classList.add('test');
break;
case 57:
document.getElementById('57').classList.add('test');
break;
case 65:
document.getElementById('65').classList.add('test');
break;
case 66:
document.getElementById('66').classList.add('test');
break;
case 67:
document.getElementById('67').classList.add('test');
break;
case 68:
document.getElementById('68').classList.add('test');
break;
case 69:
document.getElementById('69').classList.add('test');
break;
case 70:
document.getElementById('70').classList.add('test');
break;
case 71:
document.getElementById('71').classList.add('test');
break;
case 72:
document.getElementById('72').classList.add('test');
break;
case 73:
document.getElementById('73').classList.add('test');
break;
case 74:
document.getElementById('74').classList.add('test');
break;
case 75:
document.getElementById('75').classList.add('test');
break;
case 76:
document.getElementById('76').classList.add('test');
break;
case 77:
document.getElementById('77').classList.add('test');
break;
case 78:
document.getElementById('78').classList.add('test');
break;
case 79:
document.getElementById('79').classList.add('test');
break;
case 80:
document.getElementById('80').classList.add('test');
break;
case 81:
document.getElementById('81').classList.add('test');
break;
case 82:
document.getElementById('82').classList.add('test');
break;
case 83:
document.getElementById('83').classList.add('test');
break;
case 84:
document.getElementById('84').classList.add('test');
break;
case 85:
document.getElementById('85').classList.add('test');
break;
case 86:
document.getElementById('86').classList.add('test');
break;
case 87:
document.getElementById('87').classList.add('test');
break;
case 88:
document.getElementById('88').classList.add('test');
break;
case 89:
document.getElementById('89').classList.add('test');
break;
case 90:
document.getElementById('90').classList.add('test');
break;
case 91:
document.getElementById('91').classList.add('test');
break;
case 96:
document.getElementById('96').classList.add('test');
break;
case 97:
document.getElementById('97').classList.add('test');
break;
case 98:
document.getElementById('98').classList.add('test');
break;
case 99:
document.getElementById('99').classList.add('test');
break;
case 100:
document.getElementById('100').classList.add('test');
break;
case 101:
document.getElementById('101').classList.add('test');
break;
case 102:
document.getElementById('102').classList.add('test');
break;
case 103:
document.getElementById('103').classList.add('test');
break;
case 104:
document.getElementById('104').classList.add('test');
break;
case 105:
document.getElementById('105').classList.add('test');
break;
case 106:
document.getElementById('106').classList.add('test');
break;
case 107:
document.getElementById('107').classList.add('test');
break;
case 109:
document.getElementById('109').classList.add('test');
break;
case 111:
document.getElementById('111').classList.add('test');
break;
case 110:
document.getElementById('110').classList.add('test');
break;
case 112:
document.getElementById('112').classList.add('test');
break;
case 113:
document.getElementById('113').classList.add('test');
break;
case 114:
document.getElementById('114').classList.add('test');
break;
case 115:
document.getElementById('115').classList.add('test');
break;
case 116:
document.getElementById('116').classList.add('test');
break;
case 117:
document.getElementById('117').classList.add('test');
break;
case 118:
document.getElementById('118').classList.add('test');
break;
case 119:
document.getElementById('119').classList.add('test');
break;
case 120:
document.getElementById('120').classList.add('test');
break;
case 121:
document.getElementById('121').classList.add('test');
break;
case 122:
document.getElementById('122').classList.add('test');
break;
case 123:
document.getElementById('123').classList.add('test');
break;
case 144:
document.getElementById('144').classList.add('test');
break;
case 176:
document.getElementById('176').classList.add('test');
break;
case 177:
document.getElementById('177').classList.add('test');
break;
case 179:
document.getElementById('179').classList.add('test');
break;
case 186:
document.getElementById('186').classList.add('test');
break;
case 187:
document.getElementById('187').classList.add('test');
break;
case 188:
document.getElementById('188').classList.add('test');
break;
case 189:
document.getElementById('189').classList.add('test');
break;
case 190:
document.getElementById('190').classList.add('test');
break;
case 191:
document.getElementById('191').classList.add('test');
break;
case 27:
document.getElementById('27').classList.add('test');
break;
case 192:
document.getElementById('192').classList.add('test');
break;
case 219:
document.getElementById('219').classList.add('test');
break;
case 220:
document.getElementById('220').classList.add('test');
break;
case 221:
document.getElementById('221').classList.add('test');
break;
case 222:
document.getElementById('222').classList.add('test');
default:
break;
}
})
window.addEventListener('resize', ()=> {
var viewport_width = document.documentElement.clientWidth;
if(viewport_width < 600) {
document.querySelector('div.container').style.display = 'none';
document.querySelector('#insert').style.display = 'none';
alert("You have to use a laptop or computer to access this webpage.")
}
else {
document.querySelector('body').display = 'inline-block';
}
})
const insert = document.getElementById('insert') // const key = document.querySelectorAll('.key'); window.addEventListener('keydown', (event) => { insert.innerHTML = ` <div class="keys"> ${event.key === ' ' ? 'Space' : event.key} <small>event.key</small> </div> <div class="keys"> ${event.keyCode} <small>event.keyCode</small> </div> <div class="keys"> ${event.code} <small>event.code</small> </div> ` switch (event.keyCode) { case 8: document.getElementById('8').classList.add('test'); break; case 9: document.getElementById('9').classList.add('test'); break; case 13: if(event.code === 'Enter') { document.getElementById('13-left').classList.add('test'); break; } else { document.getElementById('13-right').classList.add('test'); break; } case 16: if(event.code === 'ShiftLeft') { document.getElementById('16-left').classList.add('test'); break; } else { document.getElementById('16-right').classList.add('test'); break; } case 17: if(event.code === 'ControlLeft') { document.getElementById('17-left').classList.add('test'); break; } else { document.getElementById('17-right').classList.add('test'); break; } case 18: if(event.code === 'AltLeft') { document.getElementById('18-left').classList.add('test'); break; } else { document.getElementById('18-right').classList.add('test'); break; } case 20: document.getElementById('20').classList.add('test'); break; case 32: document.getElementById('32').classList.add('test'); break; case 35: document.getElementById('35').classList.add('test'); break; case 37: document.getElementById('37').classList.add('test'); break; case 38: document.querySelector('.up').classList.add('test'); break; case 39: document.getElementById('39').classList.add('test'); break; case 40: document.querySelector('.down').classList.add('test'); break; case 45: if(event.code === 'Insert') { document.getElementById('45-left').classList.add('test'); break; } else { document.getElementById('96').classList.add('test'); break; } case 46: if(event.code === 'Delete') { document.getElementById('46-left').classList.add('test'); break; } else { document.getElementById('110').classList.add('test'); break; } case 48: document.getElementById('48').classList.add('test'); break; case 49: document.getElementById('49').classList.add('test'); break; case 50: document.getElementById('50').classList.add('test'); break; case 51: document.getElementById('51').classList.add('test'); break; case 52: document.getElementById('52').classList.add('test'); break; case 53: document.getElementById('53').classList.add('test'); break; case 54: document.getElementById('54').classList.add('test'); break; case 55: document.getElementById('55').classList.add('test'); break; case 56: document.getElementById('56').classList.add('test'); break; case 57: document.getElementById('57').classList.add('test'); break; case 65: document.getElementById('65').classList.add('test'); break; case 66: document.getElementById('66').classList.add('test'); break; case 67: document.getElementById('67').classList.add('test'); break; case 68: document.getElementById('68').classList.add('test'); break; case 69: document.getElementById('69').classList.add('test'); break; case 70: document.getElementById('70').classList.add('test'); break; case 71: document.getElementById('71').classList.add('test'); break; case 72: document.getElementById('72').classList.add('test'); break; case 73: document.getElementById('73').classList.add('test'); break; case 74: document.getElementById('74').classList.add('test'); break; case 75: document.getElementById('75').classList.add('test'); break; case 76: document.getElementById('76').classList.add('test'); break; case 77: document.getElementById('77').classList.add('test'); break; case 78: document.getElementById('78').classList.add('test'); break; case 79: document.getElementById('79').classList.add('test'); break; case 80: document.getElementById('80').classList.add('test'); break; case 81: document.getElementById('81').classList.add('test'); break; case 82: document.getElementById('82').classList.add('test'); break; case 83: document.getElementById('83').classList.add('test'); break; case 84: document.getElementById('84').classList.add('test'); break; case 85: document.getElementById('85').classList.add('test'); break; case 86: document.getElementById('86').classList.add('test'); break; case 87: document.getElementById('87').classList.add('test'); break; case 88: document.getElementById('88').classList.add('test'); break; case 89: document.getElementById('89').classList.add('test'); break; case 90: document.getElementById('90').classList.add('test'); break; case 91: document.getElementById('91').classList.add('test'); break; case 96: document.getElementById('96').classList.add('test'); break; case 97: document.getElementById('97').classList.add('test'); break; case 98: document.getElementById('98').classList.add('test'); break; case 99: document.getElementById('99').classList.add('test'); break; case 100: document.getElementById('100').classList.add('test'); break; case 101: document.getElementById('101').classList.add('test'); break; case 102: document.getElementById('102').classList.add('test'); break; case 103: document.getElementById('103').classList.add('test'); break; case 104: document.getElementById('104').classList.add('test'); break; case 105: document.getElementById('105').classList.add('test'); break; case 106: document.getElementById('106').classList.add('test'); break; case 107: document.getElementById('107').classList.add('test'); break; case 109: document.getElementById('109').classList.add('test'); break; case 111: document.getElementById('111').classList.add('test'); break; case 110: document.getElementById('110').classList.add('test'); break; case 112: document.getElementById('112').classList.add('test'); break; case 113: document.getElementById('113').classList.add('test'); break; case 114: document.getElementById('114').classList.add('test'); break; case 115: document.getElementById('115').classList.add('test'); break; case 116: document.getElementById('116').classList.add('test'); break; case 117: document.getElementById('117').classList.add('test'); break; case 118: document.getElementById('118').classList.add('test'); break; case 119: document.getElementById('119').classList.add('test'); break; case 120: document.getElementById('120').classList.add('test'); break; case 121: document.getElementById('121').classList.add('test'); break; case 122: document.getElementById('122').classList.add('test'); break; case 123: document.getElementById('123').classList.add('test'); break; case 144: document.getElementById('144').classList.add('test'); break; case 176: document.getElementById('176').classList.add('test'); break; case 177: document.getElementById('177').classList.add('test'); break; case 179: document.getElementById('179').classList.add('test'); break; case 186: document.getElementById('186').classList.add('test'); break; case 187: document.getElementById('187').classList.add('test'); break; case 188: document.getElementById('188').classList.add('test'); break; case 189: document.getElementById('189').classList.add('test'); break; case 190: document.getElementById('190').classList.add('test'); break; case 191: document.getElementById('191').classList.add('test'); break; case 27: document.getElementById('27').classList.add('test'); break; case 192: document.getElementById('192').classList.add('test'); break; case 219: document.getElementById('219').classList.add('test'); break; case 220: document.getElementById('220').classList.add('test'); break; case 221: document.getElementById('221').classList.add('test'); break; case 222: document.getElementById('222').classList.add('test'); default: break; } }) window.addEventListener('resize', ()=> { var viewport_width = document.documentElement.clientWidth; if(viewport_width < 600) { document.querySelector('div.container').style.display = 'none'; document.querySelector('#insert').style.display = 'none'; alert("You have to use a laptop or computer to access this webpage.") } else { document.querySelector('body').display = 'inline-block'; } })
const insert = document.getElementById('insert')
// const key = document.querySelectorAll('.key');



window.addEventListener('keydown', (event) => {
  insert.innerHTML = `
  <div class="keys">
    ${event.key === ' ' ? 'Space' : event.key} 
    <small>event.key</small>
  </div>

  <div class="keys">
    ${event.keyCode}
    <small>event.keyCode</small>
  </div>

  <div class="keys">
    ${event.code}
    <small>event.code</small>
  </div>
  `
 switch (event.keyCode) {
  case 8:
    document.getElementById('8').classList.add('test');
    break;
  case 9:
    document.getElementById('9').classList.add('test');
    break;
  case 13:
    if(event.code === 'Enter') {
      document.getElementById('13-left').classList.add('test');
      break;
    } else {
      document.getElementById('13-right').classList.add('test');
      break;
    }
  case 16:
    if(event.code === 'ShiftLeft') {
      document.getElementById('16-left').classList.add('test');
      break;
    } else {
      document.getElementById('16-right').classList.add('test');
      break;
    }
  case 17:
    if(event.code === 'ControlLeft') {
        document.getElementById('17-left').classList.add('test');
        break;
    } else {
      document.getElementById('17-right').classList.add('test');
      break;
    }
  case 18:
    if(event.code === 'AltLeft') {
        document.getElementById('18-left').classList.add('test');
        break;
    } else {
      document.getElementById('18-right').classList.add('test');
      break;
    }
  case 20:
    document.getElementById('20').classList.add('test');
    break;
  case 32:
    document.getElementById('32').classList.add('test');
    break;
  case 35:
    document.getElementById('35').classList.add('test');
    break;
  case 37:
    document.getElementById('37').classList.add('test');
    break;
  case 38:
    document.querySelector('.up').classList.add('test');
    break;
  case 39:
    document.getElementById('39').classList.add('test');
    break;
  case 40:
    document.querySelector('.down').classList.add('test');
    break;
  case 45:
    if(event.code === 'Insert') {
        document.getElementById('45-left').classList.add('test');
        break;
    } else {
      document.getElementById('96').classList.add('test');
      break;
    }
  case 46:
    if(event.code === 'Delete') {
        document.getElementById('46-left').classList.add('test');
        break;
    } else {
      document.getElementById('110').classList.add('test');
      break;
    }
  case 48:
    document.getElementById('48').classList.add('test');
    break;
  case 49:
    document.getElementById('49').classList.add('test');
    break;
  case 50:
    document.getElementById('50').classList.add('test');
    break;
  case 51:
    document.getElementById('51').classList.add('test');
    break;
  case 52:
    document.getElementById('52').classList.add('test');
    break;
  case 53:
    document.getElementById('53').classList.add('test');
    break;
  case 54:
    document.getElementById('54').classList.add('test');
    break;
  case 55:
    document.getElementById('55').classList.add('test');
    break;
  case 56:
    document.getElementById('56').classList.add('test');
    break;
  case 57:
    document.getElementById('57').classList.add('test');
    break;
  case 65:
    document.getElementById('65').classList.add('test');
    break;
  case 66:
    document.getElementById('66').classList.add('test');
    break;
  case 67:
    document.getElementById('67').classList.add('test');
    break;
  case 68:
    document.getElementById('68').classList.add('test');
    break;
  case 69:
    document.getElementById('69').classList.add('test');
    break;
  case 70:
    document.getElementById('70').classList.add('test');
    break;
  case 71:
    document.getElementById('71').classList.add('test');
    break;
  case 72:
    document.getElementById('72').classList.add('test');
    break;
  case 73:
    document.getElementById('73').classList.add('test');
    break;
  case 74:
    document.getElementById('74').classList.add('test');
    break;
  case 75:
    document.getElementById('75').classList.add('test');
    break;
  case 76:
    document.getElementById('76').classList.add('test');
    break;
  case 77:
    document.getElementById('77').classList.add('test');
    break;
  case 78:
    document.getElementById('78').classList.add('test');
    break;
  case 79:
    document.getElementById('79').classList.add('test');
    break;
  case 80:
    document.getElementById('80').classList.add('test');
    break;
  case 81:
    document.getElementById('81').classList.add('test');
    break;
  case 82:
    document.getElementById('82').classList.add('test');
    break;
  case 83:
    document.getElementById('83').classList.add('test');
    break;
  case 84:
    document.getElementById('84').classList.add('test');
    break;
  case 85:
    document.getElementById('85').classList.add('test');
    break;
  case 86:
    document.getElementById('86').classList.add('test');
    break;
  case 87:
    document.getElementById('87').classList.add('test');
    break;
  case 88:
    document.getElementById('88').classList.add('test');
    break;
  case 89:
    document.getElementById('89').classList.add('test');
    break;
  case 90:
    document.getElementById('90').classList.add('test');
    break;
  case 91:
    document.getElementById('91').classList.add('test');
    break;
  case 96:
    document.getElementById('96').classList.add('test');
    break;
  case 97:
    document.getElementById('97').classList.add('test');
    break;
  case 98:
    document.getElementById('98').classList.add('test');
    break;
  case 99:
    document.getElementById('99').classList.add('test');
    break;
  case 100:
    document.getElementById('100').classList.add('test');
    break;
  case 101:
    document.getElementById('101').classList.add('test');
    break;
  case 102:
    document.getElementById('102').classList.add('test');
    break;
  case 103:
    document.getElementById('103').classList.add('test');
    break;
  case 104:
    document.getElementById('104').classList.add('test');
    break;
  case 105:
    document.getElementById('105').classList.add('test');
    break;
  case 106:
    document.getElementById('106').classList.add('test');
    break;
  case 107:
    document.getElementById('107').classList.add('test');
    break;
  case 109:
    document.getElementById('109').classList.add('test');
    break;
  case 111:
    document.getElementById('111').classList.add('test');
    break;
  case 110:
    document.getElementById('110').classList.add('test');
    break;
  case 112:
    document.getElementById('112').classList.add('test');
    break;
  case 113:
    document.getElementById('113').classList.add('test');
    break;
  case 114:
    document.getElementById('114').classList.add('test');
    break;
  case 115:
    document.getElementById('115').classList.add('test');
    break;
  case 116:
    document.getElementById('116').classList.add('test');
    break;
  case 117:
    document.getElementById('117').classList.add('test');
    break;
  case 118:
    document.getElementById('118').classList.add('test');
    break;
  case 119:
    document.getElementById('119').classList.add('test');
    break;
  case 120:
    document.getElementById('120').classList.add('test');
    break;
  case 121:
    document.getElementById('121').classList.add('test');
    break;
  case 122:
    document.getElementById('122').classList.add('test');
    break;
  case 123:
    document.getElementById('123').classList.add('test');
    break;
  case 144:
    document.getElementById('144').classList.add('test');
    break;
  case 176:
    document.getElementById('176').classList.add('test');
    break;
  case 177:
    document.getElementById('177').classList.add('test');
    break;
  case 179:
    document.getElementById('179').classList.add('test');
    break;  
  case 186:
    document.getElementById('186').classList.add('test');
    break;
  case 187:
    document.getElementById('187').classList.add('test');
    break;
  case 188:
    document.getElementById('188').classList.add('test');
    break;
  case 189:
    document.getElementById('189').classList.add('test');
    break;  
  case 190:
    document.getElementById('190').classList.add('test');
    break;  
  case 191:
    document.getElementById('191').classList.add('test');
    break;  
  case 27:
    document.getElementById('27').classList.add('test');
    break;
  case 192:
    document.getElementById('192').classList.add('test');
    break;
  case 219:
    document.getElementById('219').classList.add('test');
    break;
  case 220:
    document.getElementById('220').classList.add('test');
    break;
  case 221:
    document.getElementById('221').classList.add('test');
    break;
  case 222:
    document.getElementById('222').classList.add('test');
  default:
    break;
 }
})

window.addEventListener('resize', ()=> {
  var viewport_width = document.documentElement.clientWidth;
  if(viewport_width < 600) {
    document.querySelector('div.container').style.display = 'none';
    document.querySelector('#insert').style.display = 'none';
    alert("You have to use a laptop or computer to access this webpage.")
  }
  else {
    document.querySelector('body').display = 'inline-block';
  }
})

 

Explanation

  • HTML:
    • The index.html file contains a simple structure with a title, instructions, and two div elements to display the key name and key code.
  • CSS:
    • The styles.css file provides basic styling to center the content on the page and style the key display area.
  • JavaScript:
    • The script.js file adds an event listener for the keydown event. When a key is pressed, it captures the key and keyCode properties of the event and displays them in the respective div elements.

How It Works

  1. User Interface:
    • When the user opens the index.html file in a browser, they see a message instructing them to press any key.
  2. Event Listener:
    • The keydown event listener in the script.js file detects key presses.
    • When a key is pressed, the event object contains information about the key, such as key and keyCode.
  3. Display Key Information:
    • The JavaScript code updates the text content of the key-name and key-code span elements with the pressed key’s name and code.

Testing

  • Open your index.html file in a browser.
  • Press any key on your keyboard.
  • The pressed key’s name and code should be displayed on the screen.

This example provides a simple yet functional keyboard tester using HTML, CSS, and JavaScript.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.


0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Select a Rating
  • Select a Rating
  • 5 Stars
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Star