Skip to content

Commit 3c10b11

Browse files
rhritsrhrits
committed
new
1 parent 4128080 commit 3c10b11

File tree

5 files changed

+203
-2
lines changed

5 files changed

+203
-2
lines changed

‎form.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<body>
99

10-
<section style="text-align: center;" >
10+
<section style="text-align: center;">
1111

1212
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScNWhnHbxJATSdNVR-QQoMhRZ4Spvnr0O0rQVPCeQ40uObfcg/viewform?embedded=true" width="840" height="1932" frameborder="10" marginheight="30" marginwidth="20">Loading…</iframe>
1313
<!-- Your form elements would go here -->

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h5><h4><strong> 4) Make a plan:</strong></h4> Create a plan for how you will w
5656

5757
<h5><h4><strong>5) Get started:</strong></h4> Once you have your plan in place, it's time to start coding! Work through the challenges one by one, and don't be afraid to ask for help or seek additional resources if you get stuck.</h5><br>
5858
</p>
59-
<a href="./form.html" class="u-active-black u-align-left u-border-none u-btn u-btn-round u-button-style u-custom-color-2 u-custom-font u-font-lato u-hover-custom-color-1 u-radius-10 u-btn-1"><strong><b><i>Final Form</i></b></strong></a>
59+
<a href="./leaderboard.html" class="u-active-black u-align-left u-border-none u-btn u-btn-round u-button-style u-custom-color-2 u-custom-font u-font-lato u-hover-custom-color-1 u-radius-10 u-btn-1"><strong><b><i>Final Form</i></b></strong></a>
6060
<!--https://forms.gle/8Eyp7CBJVvqRLqz87-->
6161
</div>
6262
</div>

‎leaderboard.css

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* Style for search bar */
2+
.search-container {
3+
margin-top: 60px;
4+
margin-bottom: 20px;
5+
text-align: center;
6+
}
7+
8+
#search-bar {
9+
padding: 10px;
10+
font-size: 16px;
11+
border: none;
12+
border-radius: 4px;
13+
width: 50%;
14+
border: 3px solid #ddd;
15+
border-radius: 9px;
16+
overflow: hidden;
17+
}
18+
19+
/* Style for table */
20+
table {
21+
margin: 0 auto;
22+
border-collapse: collapse;
23+
width: 50%;
24+
}
25+
26+
th, td {
27+
text-align: left;
28+
padding: 8px;
29+
}
30+
31+
/*
32+
33+
th {
34+
background-color: #4CAF50;
35+
color: white;
36+
}
37+
*/
38+
39+
tr:nth-child(even) {
40+
background-color: #f2f2f2;
41+
}
42+
43+
/* Hide the leaderboard table initially */
44+
#leaderboard {
45+
display: none;
46+
}
47+
48+
49+
.title {
50+
text-align: center;
51+
font-family: "Courier New", monospace;
52+
margin-top: 20px;
53+
}
54+
.leaderboard{
55+
text-align: center;
56+
57+
font-family: "Courier New", monospace;
58+
59+
}
60+
.only{
61+
background-color: #4CAF50;
62+
color: white;
63+
}
64+
65+

‎leaderboard.html

+62
Large diffs are not rendered by default.

‎leaderboard.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Get the search bar element
2+
3+
4+
/*
5+
6+
const searchInput = document.getElementById('search-bar');
7+
8+
// Add event listener to search bar
9+
searchInput.addEventListener('input', searchTable);
10+
11+
// Function to search the table
12+
function searchTable() {
13+
// Get the input value and convert to lowercase
14+
const searchText = searchInput.value.toLowerCase();
15+
// Get the table rows
16+
const rows = document.querySelectorAll('#leaderboard tbody tr');
17+
18+
// Loop through each row and hide or show based on search text
19+
rows.forEach(row => {
20+
const email = row.children[2].textContent.toLowerCase();
21+
if (email.includes(searchText)) {
22+
row.style.display = '';
23+
} else {
24+
row.style.display = 'none';
25+
}
26+
});
27+
28+
// Show the leaderboard if there are matching search results
29+
const leaderboard = document.getElementById('leaderboard');
30+
if (searchText.length > 0 && leaderboard.style.display === 'none') {
31+
leaderboard.style.display = 'table';
32+
}
33+
} */
34+
// Get the search bar element
35+
const searchInput = document.getElementById('search-bar');
36+
37+
// Add event listener to search bar
38+
searchInput.addEventListener('input', searchTable);
39+
40+
// Function to search the table
41+
function searchTable() {
42+
// Get the input value and convert to lowercase
43+
const searchText = searchInput.value.toLowerCase();
44+
// Get the table rows
45+
const rows = document.querySelectorAll('#leaderboard tbody tr');
46+
47+
// Loop through each row and hide or show based on search text
48+
rows.forEach(row => {
49+
const email = row.children[2].textContent.toLowerCase();
50+
if (email.includes(searchText)) {
51+
row.style.display = '';
52+
} else {
53+
row.style.display = 'none';
54+
}
55+
});
56+
57+
// Show or hide the leaderboard based on search results
58+
const leaderboard = document.getElementById('leaderboard');
59+
if (searchText.length > 0) {
60+
let hasMatchingRows = false;
61+
rows.forEach(row => {
62+
if (row.style.display !== 'none') {
63+
hasMatchingRows = true;
64+
}
65+
});
66+
if (hasMatchingRows) {
67+
leaderboard.style.display = 'table';
68+
} else {
69+
leaderboard.style.display = 'none';
70+
}
71+
} else {
72+
leaderboard.style.display = 'none';
73+
}
74+
}

0 commit comments

Comments
 (0)