├── Alpkey.png
├── Arrkey.png
├── index.html
├── main.js
├── numkey.png
├── otherkey.png
└── spkey.png
/Alpkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Super45coder/Project-84/0c434f5156e2b23695c60685de9566132ff0db98/Alpkey.png
--------------------------------------------------------------------------------
/Arrkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Super45coder/Project-84/0c434f5156e2b23695c60685de9566132ff0db98/Arrkey.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
29 |
30 |
31 |
32 |
33 |
34 | ASCII value
35 |
36 |
37 |
38 |
39 | Keyboard keys
40 |
41 |
42 |
43 |
44 | NOTE : PRESS ANY KEYBOARD KEY
45 |
46 |
47 |
48 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | canvas = document.getElementById('myCanvas');
2 | ctx = canvas.getContext("2d");
3 |
4 | img_width = 300;
5 | img_height = 100;
6 |
7 | var img_image;
8 |
9 | img_x = 100;
10 | img_y = 100;
11 |
12 | function add() {
13 | img_imgTag = new Image(); //defining a variable with a new image
14 | img_imgTag.onload = uploadimg; // setting a function, onloading this variable
15 | img_imgTag.src = img_image; // load image
16 | }
17 |
18 | function uploadimg() {
19 |
20 | ctx.drawImage(img_imgTag, img_x, img_y, img_width, img_height);
21 | }
22 |
23 | window.addEventListener("keydown", my_keydown);
24 |
25 | function my_keydown(e)
26 | {
27 | keyPressed = e.keyCode;
28 | console.log(keyPressed);
29 |
30 | if((keyPressed >=97 && keyPressed<=122)|| (keyPressed >=65 && keyPressed<=90)){
31 | aplhabetkey();
32 | document.getElementById("d1").innerHTML = "You pressed alphabet key";
33 | }else if (keyPressed >=48 && keyPressed <=57){
34 | numberkey();
35 | document.getElementById("d1").innerHTML = "You pressed number key";
36 | }else if(keyPressed >= 37 && keyPressed <= 40){
37 | arrowkey();
38 | document.getElementById("d1").innerHTML = "You pressed arrow key";
39 | }else if((keyPressed = 17) || (keyPressed = 18) || (keyPressed = 27)){
40 | specialkey();
41 | document.getElementById("d1").innerHTML = "You pressed a special key";
42 | }else{
43 | otherkey();
44 | document.getElementById("d1").innerHTML="You pressed symbol or other key";
45 | }
46 | }
47 |
48 | function aplhabetkey()
49 | {
50 | img_image="Alpkey.png";
51 | console.log("Alphabet");
52 | add();
53 | }
54 | function numberkey()
55 | {
56 | img_image="numkey.png";
57 | console.log("Number");
58 | add();
59 | }
60 | function arrowkey()
61 | {
62 | img_image="Arrkey.png";
63 | console.log("Arrow");
64 | add();
65 | }
66 | function specialkey()
67 | {
68 | img_image="spkey.png";
69 | console.log("Special");
70 | add();
71 | }
72 | function otherkey()
73 | {
74 | img_image="otherkey.png";
75 | console.log("Other");
76 | add();
77 | }
78 |
79 |
--------------------------------------------------------------------------------
/numkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Super45coder/Project-84/0c434f5156e2b23695c60685de9566132ff0db98/numkey.png
--------------------------------------------------------------------------------
/otherkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Super45coder/Project-84/0c434f5156e2b23695c60685de9566132ff0db98/otherkey.png
--------------------------------------------------------------------------------
/spkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Super45coder/Project-84/0c434f5156e2b23695c60685de9566132ff0db98/spkey.png
--------------------------------------------------------------------------------