Skip to content

Commit c5e7340

Browse files
anuragverma108anuragverma108
authored
Merge pull request #718 from Irtesaam/fix-searchbar
Fixes #717 : searchbar now shows result when enter key is pressed
2 parents 5f41c69 + a861e3b commit c5e7340

File tree

1 file changed

+83
-61
lines changed

1 file changed

+83
-61
lines changed

‎index.html

Lines changed: 83 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88

9-
<!--
9+
<!--
1010
- primary meta tags
1111
-->
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@@ -16,27 +16,27 @@
1616
<meta name="title" content="SkillWise">
1717
<meta name="description" content="This is a education html template made by Priya Ghosal">
1818

19-
<!--
19+
<!--
2020
- favicon
2121
-->
2222
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
2323

24-
<!--
24+
<!--
2525
- custom font link
2626
-->
2727
<link rel="stylesheet" href="./assets/font/font.css">
2828

29-
<!--
29+
<!--
3030
- custom css link
3131
-->
3232
<link rel="stylesheet" href="./assets/css/style.css" id="theme-style">
3333

34-
<!--
34+
<!--
3535
-dark mode css link disabled
3636
-->
3737
<!-- <link rel="stylesheet" href="./assets/css/darkmode.css" id="theme-style" > -->
3838

39-
<!--
39+
<!--
4040
- preload images
4141
-->
4242
<link rel="preload" as="image" href="./assets/images/hero-banner.png">
@@ -49,7 +49,7 @@
4949

5050
<body>
5151

52-
<!--
52+
<!--
5353
- PRELOADER
5454
-->
5555

@@ -60,7 +60,7 @@
6060

6161

6262

63-
<!--
63+
<!--
6464
- #HEADER
6565
-->
6666
<header class="header" data-header>
@@ -119,11 +119,11 @@
119119
</li>
120120
<li class="navbar-item">
121121
<div class="searchBox">
122-
<input class="searchInput" id = "search-bar" type="text" name="" placeholder="Search something">
122+
<input class="searchInput" id = "search-bar" type="text" name="" placeholder="Search courses">
123123
<button onclick="searchCourses()" class="searchButton SearchBTN" href="#">
124124
<div id="search-results"></div>
125125
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29" fill="none">
126-
126+
127127
<g clip-path="url(#clip0_2_17)">
128128
<g filter="url(#filter0_d_2_17)">
129129
<path
@@ -150,7 +150,7 @@
150150
</clipPath>
151151
</defs>
152152
</svg>
153-
153+
154154
</button>
155155
</div>
156156
</li>
@@ -177,7 +177,7 @@
177177
<main>
178178
<article>
179179

180-
<!--
180+
<!--
181181
- #HERO
182182
-->
183183

@@ -258,7 +258,7 @@ <h3>Your Email</h3>
258258

259259

260260

261-
<!--
261+
<!--
262262
- #CATEGORY
263263
-->
264264

@@ -402,7 +402,7 @@ <h3 class="title-lg">Finances</h3>
402402

403403

404404

405-
<!--
405+
<!--
406406
- #ABOUT
407407
-->
408408

@@ -477,7 +477,7 @@ <h2 class="headline-md section-title">
477477

478478

479479

480-
<!--
480+
<!--
481481
- #COURSE
482482
-->
483483

@@ -825,7 +825,7 @@ <h3 class="title-lg card-title">
825825

826826

827827

828-
<!--
828+
<!--
829829
- #CTA
830830
-->
831831

@@ -928,7 +928,7 @@ <h2 id="Trust">Trusted by Organizations</h2>
928928
</div>
929929

930930

931-
<!--
931+
<!--
932932
- #BLOG
933933
-->
934934

@@ -1009,7 +1009,7 @@ <h3 class="title-lg card-title">
10091009
</section>
10101010

10111011

1012-
<!--
1012+
<!--
10131013
- #PRICING
10141014
-->
10151015

@@ -1124,7 +1124,7 @@ <h5> Starting at $2,000.00 per month.
11241124
</div>
11251125
</section>
11261126

1127-
<!--
1127+
<!--
11281128
#Testimonials
11291129
-->
11301130

@@ -1177,23 +1177,23 @@ <h3 class="title-lg card-title">Emily Johnson</h3>
11771177
</div>
11781178
</li>
11791179
</ul>
1180-
1180+
11811181
<div class="button-container">
11821182
<a href="./pages/testimonials.html" class="btn btn-primary" data-aos="zoom-in">See All Testimonials</a>
11831183
</div>
1184-
1184+
11851185
</div>
11861186

11871187
</section>
1188-
1188+
11891189
<section id="events" class="section events" aria-labelledby="events-label">
11901190
<div class="container">
11911191
<p class="title-sm text-center section-subtitle" id="events-label">Upcoming Workshops</p>
1192-
1192+
11931193
<h2 class="headline-md text-center section-title" data-aos="fade-down">
11941194
Join Our Skill Development <span class="span has-after">Events</span>
11951195
</h2>
1196-
1196+
11971197
<div class="event-list">
11981198
<!-- Event 1 -->
11991199
<div class="event-item" data-aos="fade-right">
@@ -1207,7 +1207,7 @@ <h3 class="event-title">Web Development Bootcamp</h3>
12071207
</div>
12081208
<a href="#" class="event-button">View Event</a>
12091209
</div>
1210-
1210+
12111211
<!-- Event 2 -->
12121212
<div class="event-item" data-aos="fade-right">
12131213
<div class="event-date-box">
@@ -1220,7 +1220,7 @@ <h3 class="event-title">Data Science Workshop</h3>
12201220
</div>
12211221
<a href="#" class="event-button">View Event</a>
12221222
</div>
1223-
1223+
12241224
<!-- Event 3 -->
12251225
<div class="event-item" data-aos="fade-right">
12261226
<div class="event-date-box">
@@ -1234,16 +1234,16 @@ <h3 class="event-title">Creative Design Thinking</h3>
12341234
<a href="#" class="event-button">View Event</a>
12351235
</div>
12361236
</div>
1237-
1237+
12381238
<div class="button-container">
12391239
<a href="./pages/events.html" class="btn btn-primary see-all" data-aos="zoom-in">View All Workshops</a>
12401240
</div>
12411241
</div>
12421242
</section>
1243-
1244-
1245-
1246-
1243+
1244+
1245+
1246+
12471247

12481248
</article>
12491249
</main>
@@ -1310,7 +1310,7 @@ <h3 class="event-title">Creative Design Thinking</h3>
13101310
<img src="./assets/images/youtube.svg" width="40" height="40" loading="lazy" alt="Youtube">
13111311
</a>
13121312
</li>
1313-
1313+
13141314

13151315
</ul>
13161316

@@ -1441,17 +1441,17 @@ <h3 class="event-title">Creative Design Thinking</h3>
14411441
-->
14421442

14431443
<section id="contact" class="cta" aria-labelledby="cta-label">
1444-
1444+
14451445
<div class="container" style="align-items: center;
14461446
justify-content: center;
14471447
display: flex;
14481448
flex-direction: column;
14491449
gap: 10px;">
1450-
1450+
14511451
<h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style="font-size: clamp(4rem, 100px, 3vw);">
14521452
Contact Us.
14531453
</h2>
1454-
1454+
14551455
<form id="contact-form" data-aos="fade-left" style="
14561456
max-width: 90%;
14571457
width: 400px;
@@ -1463,7 +1463,7 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style
14631463
" onmouseover="this.style.boxShadow='0 10px 20px rgba(0, 0, 0, 0.2)'"
14641464
onmouseout="this.style.boxShadow='0 6px 12px rgba(0, 0, 0, 0.15)'">
14651465

1466-
<input type="text" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
1466+
<input type="text" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
14671467
oninput="this.setCustomValidity('')" style="
14681468
width: 100%;
14691469
padding: 12px;
@@ -1502,9 +1502,9 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style
15021502
height: 150px;
15031503
resize: none;
15041504
transition: border-color 0.3s ease, box-shadow 0.3s ease;
1505-
" onfocus="this.style.borderColor='#ff66b2'; this.style.boxShadow='0 0 10px rgba(255, 102, 178, 0.3)'"
1505+
" onfocus="this.style.borderColor='#ff66b2'; this.style.boxShadow='0 0 10px rgba(255, 102, 178, 0.3)'"
15061506
onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'"></textarea>
1507-
1507+
15081508
<button type="submit" style="
15091509
background-color: #ff66b2;
15101510
color: white;
@@ -1542,33 +1542,55 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style
15421542

15431543
<!--JS for searching courses -->
15441544
<script>
1545-
1546-
// Define searchCourses function
1547-
function searchCourses() {
1548-
const searchTerm = document.getElementById('search-bar').value.toLowerCase();
1549-
const courses = document.querySelectorAll('.category-card');
1550-
const resultsDiv = document.getElementById('search-results');
1551-
resultsDiv.innerHTML = ''; // Clear previous results
1552-
let found = false; // Flag to track if any course is found
1553-
1554-
courses.forEach((course) => {
1555-
const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase();
1556-
if (courseTitle.includes(searchTerm)) {
1557-
const resultCard = course.cloneNode(true); // Clone the course card
1558-
resultsDiv.appendChild(resultCard); // Show matching result at the top
1559-
found = true; // Set flag to true if a course is found
1560-
}
1561-
});
1562-
1563-
// If no courses match, show "No results found"
1564-
if (!found) {
1565-
resultsDiv.innerHTML = '<p>No results found</p>';
1545+
1546+
document.addEventListener("DOMContentLoaded", () => {
1547+
const searchInput = document.getElementById('search-bar');
1548+
1549+
// Add event listener for Enter key press
1550+
searchInput.addEventListener('keypress', (event) => {
1551+
if (event.key === 'Enter') {
1552+
event.preventDefault(); // Prevent form submission if inside a form
1553+
searchCourses(); // Call the search function
15661554
}
1555+
});
1556+
});
1557+
1558+
function searchCourses() {
1559+
const searchTerm = document.getElementById('search-bar').value.toLowerCase();
1560+
const courses = document.querySelectorAll('.category-card');
1561+
const resultsDiv = document.getElementById('search-results');
1562+
resultsDiv.innerHTML = ''; // Clear previous results
1563+
1564+
// Exit early if search term is empty
1565+
if (!searchTerm.trim()) {
1566+
resultsDiv.innerHTML = '<p class="no-results">Please enter a search term</p>';
1567+
return;
1568+
}
1569+
1570+
let found = false; // Flag to track if any course is found
1571+
const uniqueCourses = new Set(); // Set to track unique courses
1572+
1573+
courses.forEach((course) => {
1574+
const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase();
1575+
if (courseTitle.includes(searchTerm)) {
1576+
if (!uniqueCourses.has(courseTitle)) {
1577+
uniqueCourses.add(courseTitle); // Add course title to the set
1578+
const resultCard = course.cloneNode(true); // Clone the course card
1579+
resultsDiv.appendChild(resultCard); // Show matching result at the top
1580+
found = true; // Set flag to true if a course is found
1581+
}
1582+
}
1583+
});
1584+
1585+
// If no courses match, show "No results found"
1586+
if (!found) {
1587+
resultsDiv.innerHTML = '<p class="no-results">No results found</p>';
1588+
}
15671589
}
15681590

15691591
</script>
15701592

1571-
<!--
1593+
<!--
15721594
- custom js link
15731595
-->
15741596
<!-- Custom JS Links -->
@@ -1594,7 +1616,7 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style
15941616

15951617
<script src="./assets/js/blogs.js"></script>
15961618

1597-
<!--
1619+
<!--
15981620
- ionicon
15991621
-->
16001622
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

0 commit comments

Comments
 (0)