WebMidiMapper/index.html at master · rikard-io/WebMidiMapper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebMidiMapper</title>
  <style>
    #dot,#square,#triangle{
      display: inline-block;
    }
  #dot{
   width: 100px;
   height: 100px;
   background: #334;
   border-radius: 50%;
  }
  #square{
   width: 100px;
   height: 100px;
   background: rgb(240, 0, 72);
  }
  #triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(29, 209, 83);
  }
  #keytester{
    border: 1px solid blue;
    padding: 40px;
  }
  </style>
</head>
<body>
<div id="app">
  <div id="dot"></div>
  <div id="square"></div>
  <div id="triangle"></div>
  <div>
    <p class="title">HEJ!</p>
    <div><p>This is some longer text embedded in a div and a p</p></div>
    <a href="https://example.com">link</a>
    <div id="keytester">
      KEY TEST, MAP KEYDOWN HERE
    </div>
    <div id="deep">
     <div>
      <div class="testo sibling1">
        This is a deeply nested thing
        Sibling 1
      </div>
      <div class="testo sibling2">
        This is a deeply nested thing
        Sibling 2
      </div>
     </div>
    </div>
  </div>
</div>
<script>
  keytester.addEventListener('keydown',(e)=>{
    console.log(e);
    keytester.innerHTML = 'keyCode: '+e.keyCode + '<br/>'+ 'key: ' + e.key;
  },false);
  window.addEventListener('keydown',(e)=>{
   console.log(e);
  },false);
</script>
</body>
</html>