Added the folder Attendance Table · Atif0604/30DaysOfJavaScript@4fb4bf0 · GitHub
Skip to content

Commit 4fb4bf0

Browse files
NdblazeNdblaze
committed
Added the folder Attendance Table
1 parent 81a91b8 commit 4fb4bf0

6 files changed

Lines changed: 190 additions & 1 deletion

File tree

‎30DaysOfJavaScript/assets/48.png‎

47.3 KB
Loading

‎48 - Attendance Table/font/sans.ttf‎

54.5 KB
Binary file not shown.

‎48 - Attendance Table/index.html‎

Lines changed: 72 additions & 0 deletions

‎48 - Attendance Table/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
function toggle(e){
3+
console.log(e.className);
4+
if(e.className == "fa-solid fa-xmark absent"){
5+
e.className = "fa-solid fa-check present";
6+
}else{
7+
e.className = "fa-solid fa-xmark absent";
8+
}
9+
10+
}

‎48 - Attendance Table/style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
* {
2+
padding: 0;
3+
box-sizing: border-box;
4+
font-family: "sans";
5+
}
6+
7+
@font-face {
8+
font-family: "sans";
9+
src: url(font/sans.ttf);
10+
}
11+
12+
body {
13+
overflow: hidden;
14+
min-height: 100vh;
15+
}
16+
17+
18+
.mee{
19+
position: absolute;
20+
top: 20px;
21+
}
22+
23+
.wrapper {
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
height: 600px;
28+
}
29+
30+
h1 {
31+
font-size: 20px;
32+
}
33+
34+
.content-table {
35+
border-collapse: collapse;
36+
margin: 25px 0;
37+
font-size: 0.9em;
38+
min-width: 400px;
39+
border-radius: 5px 5px 0 0;
40+
overflow: hidden;
41+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
42+
}
43+
44+
.content-table thead tr {
45+
background-color: #19172e;
46+
color: #fff;
47+
text-align: left;
48+
}
49+
50+
.content-table th,
51+
.content-table td {
52+
padding: 12px 15px;
53+
}
54+
55+
.content-table tbody tr {
56+
border-bottom: 1px solid #dddddd;
57+
}
58+
59+
.content-table tbody tr:hover {
60+
background-color: #fff;
61+
}
62+
63+
.content-table tbody tr:nth-of-type(even) {
64+
background-color: #f3f3f3;
65+
}
66+
67+
.content-table tbody tr:nth-last-of-type {
68+
border-bottom: 2px solid #19172e;
69+
}
70+
71+
.check {
72+
font-size: 20px;
73+
text-align: center;
74+
}
75+
76+
.check .present {
77+
color: green;
78+
cursor: pointer;
79+
}
80+
81+
.check .absent {
82+
color: red;
83+
cursor: pointer;
84+
}
85+
86+
footer,
87+
a {
88+
color: #19172e;
89+
font-size: 20px;
90+
}
91+
92+
footer {
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
text-align: center;
97+
}

‎index.html‎

Lines changed: 11 additions & 1 deletion

0 commit comments

Comments
 (0)