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' ) ;
22
3- window . addEventListener ( " keydown" , ( e ) => {
3+ window . addEventListener ( ' keydown' , ( e ) => {
44 insert . innerHTML = `<ul>
55 <li class="key">
6- ${ e . key === " " ? " Space" : e . key }
6+ ${ e . key === ' ' ? ' Space' : e . key }
77 <small>event.key</small>
88 </li>
99 <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;
33}
44
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;
1515}
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;
2021}
21- ul {
22- display : flex
22+
23+ ul {
24+ display : flex;
2325}
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;
3235}
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;
4448}
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 ;
5358}
You can’t perform that action at this time.
0 commit comments