File tree Expand file tree Collapse file tree 2 files changed +53
-48
lines changed Expand file tree Collapse file tree 2 files changed +53
-48
lines changed Original file line number Diff line number Diff line change 1
- const insert = document . getElementById ( " insert" ) ;
1
+ const insert = document . getElementById ( ' insert' ) ;
2
2
3
- window . addEventListener ( " keydown" , ( e ) => {
3
+ window . addEventListener ( ' keydown' , ( e ) => {
4
4
insert . innerHTML = `<ul>
5
5
<li class="key">
6
- ${ e . key === " " ? " Space" : e . key }
6
+ ${ e . key === ' ' ? ' Space' : e . key }
7
7
<small>event.key</small>
8
8
</li>
9
9
<li class="key">
Original file line number Diff line number Diff line change 1
- * {
2
- box-sizing : border-box
1
+ * {
2
+ box-sizing : border-box;
3
3
}
4
4
5
- body {
6
- background-color : floralwhite;
7
- font-family : "Segoe UI" , sans-serif;
8
- margin : 0 ;
9
- overflow : hidden;
10
- height : 100vh ;
11
- padding : 20px ;
12
- display : flex;
13
- justify-content : center;
14
- align-items : center
5
+ body {
6
+ background-color : floralwhite;
7
+ font-family : "Segoe UI" , sans-serif;
8
+ margin : 0 ;
9
+ overflow : hidden;
10
+ height : 100vh ;
11
+ padding : 20px ;
12
+ display : flex;
13
+ justify-content : center;
14
+ align-items : center;
15
15
}
16
- # insert {
17
- display : flex;
18
- flex-direction : column;
19
- align-items : center
16
+
17
+ # insert {
18
+ display : flex;
19
+ flex-direction : column;
20
+ align-items : center;
20
21
}
21
- ul {
22
- display : flex
22
+
23
+ ul {
24
+ display : flex;
23
25
}
24
- li {
25
- list-style-type : none;
26
- margin : 0 ;
27
- padding : 20px ;
28
- background-color : # fffafa ;
29
- display : flex;
30
- flex-direction : column;
31
- align-items : center
26
+
27
+ li {
28
+ list-style-type : none;
29
+ margin : 0 ;
30
+ padding : 20px ;
31
+ background-color : # fffafa ;
32
+ display : flex;
33
+ flex-direction : column;
34
+ align-items : center;
32
35
}
33
- .key {
34
- border : 1px solid # 999 ;
35
- background-color : # eee ;
36
- box-shadow : 1px 1px 3px rgba (0 , 0 , 0 , .1 );
37
- align-items : center;
38
- font-size : 20px ;
39
- font-weight : bold;
40
- padding : 20px ;
41
- margin : 30px ;
42
- min-width : 150px ;
43
- position : relative
36
+
37
+ .key {
38
+ border : 1px solid # 999 ;
39
+ background-color : # eee ;
40
+ box-shadow : 1px 1px 3px rgba (0 , 0 , 0 , 0.1 );
41
+ align-items : center;
42
+ font-size : 20px ;
43
+ font-weight : bold;
44
+ padding : 20px ;
45
+ margin : 30px ;
46
+ min-width : 150px ;
47
+ position : relative;
44
48
}
45
- .key small {
46
- position : absolute;
47
- top : -24px ;
48
- left : 0 ;
49
- text-align : center;
50
- width : 100% ;
51
- font-size : 14px ;
52
- color : # 555
49
+
50
+ .key small {
51
+ position : absolute;
52
+ top : -24px ;
53
+ left : 0 ;
54
+ text-align : center;
55
+ width : 100% ;
56
+ font-size : 14px ;
57
+ color : # 555 ;
53
58
}
You can’t perform that action at this time.
0 commit comments