classmember/keys.html

## keys.html
<!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>Detecting Key Input</title>

    <!-- http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js -->
    <script src="shortcut.js"></script>

</head>
<body>
<h4>This page counts how many times keys are pressed</h4>
<span>F1: </span><span id="F1">0</span><br>
<span>F2: </span><span id="F2">0</span><br>
<span>F3: </span><span id="F3">0</span><br>
<span>F4: </span><span id="F4">0</span><br>
<span>F5: </span><span id="F5">0</span><br>
<span>F6: </span><span id="F6">0</span><br>
<span>F7: </span><span id="F7">0</span><br>
<span>F8: </span><span id="F8">0</span><br>
<span>F9: </span><span id="F9">0</span><br>
<span>F10: </span><span id="F10">0</span><br>
<span>F11: </span><span id="F11">0</span><br>
<span>F12: </span><span id="F12">0</span><br>
<span>1: </span><span id="D1">0</span><br>
<span>2: </span><span id="D2">0</span><br>
<span>3: </span><span id="D3">0</span><br>
<span>4: </span><span id="D4">0</span><br>
<span>5: </span><span id="D5">0</span><br>
<span>6: </span><span id="D6">0</span><br>
<span>7: </span><span id="D7">0</span><br>
<span>8: </span><span id="D8">0</span><br>
<span>9: </span><span id="D9">0</span><br>
<span>0: </span><span id="D0">0</span><br>
<span>space: </span><span id="space">0</span><br>
<span>right: </span><span id="right">0</span><br>
<span>left: </span><span id="left">0</span><br>
<span>up: </span><span id="up">0</span><br>
<span>down: </span><span id="down">0</span><br>

<script>
window.onload = function(){

    var values = [];
    for (var i = 0; i < 1024; i++) values[i] = 0;

    shortcut.add("F1", () => {
        values[16] = values[16] + 1;
        F1.innerHTML = values[16];
    });
    shortcut.add("F2", () => {
        values[17] = values[17] + 1;
        F2.innerHTML = values[17];
    });
    shortcut.add("F3", () => {
        values[18] = values[18] + 1;
        F3.innerHTML = values[18];
    });
    shortcut.add("F4", () => {
        values[19] = values[19] + 1;
        F4.innerHTML = values[19];
    });
    shortcut.add("F5", () => {
        values[20] = values[20] + 1;
        F5.innerHTML = values[20];
    });
    shortcut.add("F6", () => {
        values[21] = values[21] + 1;
        F6.innerHTML = values[21];
    });
    shortcut.add("F7", () => {
        values[22] = values[22] + 1;
        F7.innerHTML = values[22];
    });
    shortcut.add("F8", () => {
        values[23] = values[23] + 1;
        F8.innerHTML = values[23];
    });
    shortcut.add("F9", () => {
        values[24] = values[24] + 1;
        F9.innerHTML = values[24];
    });
    shortcut.add("F10", () => {
        values[25] = values[25] + 1;
        F10.innerHTML = values[25];
    });
    shortcut.add("F11", () => {
        values[26] = values[26] + 1;
        F11.innerHTML = values[26];
    });
    shortcut.add("F12", () => {
        values[27] = values[27] + 1;
        F12.innerHTML = values[27];
    });

    // Keycode Reference:
    // https://www.toptal.com/developers/keycode

    window.onkeyup = function(event) {
        if (event.code === "Digit0") {
            values[0] = values[0] + 1;
            D0.innerHTML = values[0];
        };
        if (event.code === "Digit1") {
            values[1] = values[1] + 1;
            D1.innerHTML = values[1];
        };
        if (event.code === "Digit2") {
            values[2] = values[2] + 1;
            D2.innerHTML = values[2];
        };
        if( event.code === "Digit3") {
            values[3] = values[3] + 1;
            D3.innerHTML = values[3];
        };
        if(event.code === "Digit4"){
            values[4] = values[4] + 1;
            D4.innerHTML = values[4];
        };
        if(event.code === "Digit5"){
            values[5] = values[5] + 1;
            D5.innerHTML = values[5];
        };
        if(event.code === "Digit6"){
            values[6] = values[6] + 1;
            D6.innerHTML = values[6];
        };
        if(event.code === "Digit7"){
            values[7] = values[7] + 1;
            D7.innerHTML = values[7];
        };
        if(event.code === "Digit8"){
            values[8] = values[8] + 1;
            D8.innerHTML = values[8];
        };
        if(event.code === "Digit9"){
            values[9] = values[9] + 1;
            D9.innerHTML = values[9];
        };
        if(event.code === "Space"){
            values[10] = values[10] + 1;
            space.innerHTML = values[10];
        };
        if(event.code === "ArrowRight")
        {
            values[11] = values[11] + 1;
            right.innerHTML = values[11];
        };
        if(event.code === "ArrowLeft")
        {
            values[12] = values[12] + 1;
            left.innerHTML = values[12];
        };
        if(event.code === "ArrowUp")
        {
            values[13] = values[13] + 1;
            up.innerHTML = values[13];
        };
        if(event.code === "ArrowDown")
        {
            values[14] = values[14] + 1;
            down.innerHTML = values[14];
        };
        if(event.code === "F1")
        {
            values[15] = values[15] + 1;
            down.innerHTML = values[15];
        };
    };
};
</script>
</body>
</html>
	<!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>Detecting Key Input</title>

	<!-- http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js -->
	<script src="shortcut.js"></script>

	</head>
	<body>
	<h4>This page counts how many times keys are pressed</h4>
	<span>F1: </span><span id="F1">0</span><br>
	<span>F2: </span><span id="F2">0</span><br>
	<span>F3: </span><span id="F3">0</span><br>
	<span>F4: </span><span id="F4">0</span><br>
	<span>F5: </span><span id="F5">0</span><br>
	<span>F6: </span><span id="F6">0</span><br>
	<span>F7: </span><span id="F7">0</span><br>
	<span>F8: </span><span id="F8">0</span><br>
	<span>F9: </span><span id="F9">0</span><br>
	<span>F10: </span><span id="F10">0</span><br>
	<span>F11: </span><span id="F11">0</span><br>
	<span>F12: </span><span id="F12">0</span><br>
	<span>1: </span><span id="D1">0</span><br>
	<span>2: </span><span id="D2">0</span><br>
	<span>3: </span><span id="D3">0</span><br>
	<span>4: </span><span id="D4">0</span><br>
	<span>5: </span><span id="D5">0</span><br>
	<span>6: </span><span id="D6">0</span><br>
	<span>7: </span><span id="D7">0</span><br>
	<span>8: </span><span id="D8">0</span><br>
	<span>9: </span><span id="D9">0</span><br>
	<span>0: </span><span id="D0">0</span><br>
	<span>space: </span><span id="space">0</span><br>
	<span>right: </span><span id="right">0</span><br>
	<span>left: </span><span id="left">0</span><br>
	<span>up: </span><span id="up">0</span><br>
	<span>down: </span><span id="down">0</span><br>

	<script>
	window.onload = function(){

	var values = [];
	for (var i = 0; i < 1024; i++) values[i] = 0;

	shortcut.add("F1", () => {
	values[16] = values[16] + 1;
	F1.innerHTML = values[16];
	});
	shortcut.add("F2", () => {
	values[17] = values[17] + 1;
	F2.innerHTML = values[17];
	});
	shortcut.add("F3", () => {
	values[18] = values[18] + 1;
	F3.innerHTML = values[18];
	});
	shortcut.add("F4", () => {
	values[19] = values[19] + 1;
	F4.innerHTML = values[19];
	});
	shortcut.add("F5", () => {
	values[20] = values[20] + 1;
	F5.innerHTML = values[20];
	});
	shortcut.add("F6", () => {
	values[21] = values[21] + 1;
	F6.innerHTML = values[21];
	});
	shortcut.add("F7", () => {
	values[22] = values[22] + 1;
	F7.innerHTML = values[22];
	});
	shortcut.add("F8", () => {
	values[23] = values[23] + 1;
	F8.innerHTML = values[23];
	});
	shortcut.add("F9", () => {
	values[24] = values[24] + 1;
	F9.innerHTML = values[24];
	});
	shortcut.add("F10", () => {
	values[25] = values[25] + 1;
	F10.innerHTML = values[25];
	});
	shortcut.add("F11", () => {
	values[26] = values[26] + 1;
	F11.innerHTML = values[26];
	});
	shortcut.add("F12", () => {
	values[27] = values[27] + 1;
	F12.innerHTML = values[27];
	});

	// Keycode Reference:
	// https://www.toptal.com/developers/keycode

	window.onkeyup = function(event) {
	if (event.code === "Digit0") {
	values[0] = values[0] + 1;
	D0.innerHTML = values[0];
	};
	if (event.code === "Digit1") {
	values[1] = values[1] + 1;
	D1.innerHTML = values[1];
	};
	if (event.code === "Digit2") {
	values[2] = values[2] + 1;
	D2.innerHTML = values[2];
	};
	if( event.code === "Digit3") {
	values[3] = values[3] + 1;
	D3.innerHTML = values[3];
	};
	if(event.code === "Digit4"){
	values[4] = values[4] + 1;
	D4.innerHTML = values[4];
	};
	if(event.code === "Digit5"){
	values[5] = values[5] + 1;
	D5.innerHTML = values[5];
	};
	if(event.code === "Digit6"){
	values[6] = values[6] + 1;
	D6.innerHTML = values[6];
	};
	if(event.code === "Digit7"){
	values[7] = values[7] + 1;
	D7.innerHTML = values[7];
	};
	if(event.code === "Digit8"){
	values[8] = values[8] + 1;
	D8.innerHTML = values[8];
	};
	if(event.code === "Digit9"){
	values[9] = values[9] + 1;
	D9.innerHTML = values[9];
	};
	if(event.code === "Space"){
	values[10] = values[10] + 1;
	space.innerHTML = values[10];
	};
	if(event.code === "ArrowRight")
	{
	values[11] = values[11] + 1;
	right.innerHTML = values[11];
	};
	if(event.code === "ArrowLeft")
	{
	values[12] = values[12] + 1;
	left.innerHTML = values[12];
	};
	if(event.code === "ArrowUp")
	{
	values[13] = values[13] + 1;
	up.innerHTML = values[13];
	};
	if(event.code === "ArrowDown")
	{
	values[14] = values[14] + 1;
	down.innerHTML = values[14];
	};
	if(event.code === "F1")
	{
	values[15] = values[15] + 1;
	down.innerHTML = values[15];
	};
	};
	};
	</script>
	</body>
	</html>