Skip to content

Commit a9fdc01

Browse files
tajulafreentajulafreen
committed
minimize the code
1 parent dc35796 commit a9fdc01

File tree

2 files changed

+74
-78
lines changed

2 files changed

+74
-78
lines changed

‎Source-Code/EventCode/index.html‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,26 @@
77
<title>Event Code</title>
88
</head>
99
<body>
10-
<div class="insert">
11-
<ul>
12-
<li class="key">
13-
a
14-
<small>event.key</small>
15-
</li>
16-
<li class="key">
17-
a
18-
<small>event.keycode</small>
19-
</li>
20-
<li class="key">
21-
a
22-
<small>event.Code</small>
23-
</li>
24-
</ul>
25-
<button class="key">
26-
press any key to get the keyCode
27-
</button>
28-
</div>
29-
30-
10+
<div class="insert">
11+
<ul>
12+
<li class="key">
13+
a
14+
<small>event.key</small>
15+
</li>
16+
<li class="key">
17+
a
18+
<small>event.keyCode</small>
19+
</li>
20+
<li class="key">
21+
a
22+
<small>event.code</small>
23+
</li>
24+
</ul>
25+
<button class="key">
26+
press any key to get the keyCode
27+
</button>
28+
</div>
29+
3130
<script src="script.js"></script>
32-
</body>
31+
</body>
3332
</html>

‎Source-Code/EventCode/style.css‎

Lines changed: 53 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,53 @@
1-
* {
2-
box-sizing: border-box;
3-
}
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;
15-
}
16-
17-
.insert{
18-
display: flex;
19-
flex-direction: column;
20-
align-items: center;
21-
22-
}
23-
ul{
24-
display: flex;
25-
}
26-
li{
27-
list-style-type: none;
28-
margin: 0;
29-
padding: 20px;
30-
background-color: #fffafa;
31-
display: flex;
32-
flex-direction: column;
33-
align-items: center;
34-
}
35-
.key{
36-
border: 1px solid #999;
37-
background-color: #eee;
38-
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
39-
align-items: center;
40-
font-size: 20px;
41-
font-weight: bold;
42-
padding: 20px;
43-
44-
margin: 30px;
45-
min-width: 150px;
46-
position: relative;
47-
}
48-
.key small {
49-
position: absolute;
50-
top: -24px;
51-
left: 0;
52-
text-align: center;
53-
width: 100%;
54-
font-size: 14px;
55-
color: #555;
56-
}
1+
*{
2+
box-sizing:border-box
3+
}
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
15+
}
16+
.insert{
17+
display:flex;
18+
flex-direction:column;
19+
align-items:center
20+
}
21+
ul{
22+
display:flex
23+
}
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
32+
}
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
44+
}
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
53+
}

0 commit comments

Comments
 (0)