-
Notifications
You must be signed in to change notification settings - Fork 373
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #718 from Irtesaam/fix-searchbar
Fixes #717 : searchbar now shows result when enter key is pressed
- Loading branch information
Showing
1 changed file
with
83 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<!-- | ||
<!-- | ||
- primary meta tags | ||
--> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | ||
|
@@ -16,27 +16,27 @@ | |
<meta name="title" content="SkillWise"> | ||
<meta name="description" content="This is a education html template made by Priya Ghosal"> | ||
|
||
<!-- | ||
<!-- | ||
- favicon | ||
--> | ||
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml"> | ||
|
||
<!-- | ||
<!-- | ||
- custom font link | ||
--> | ||
<link rel="stylesheet" href="./assets/font/font.css"> | ||
|
||
<!-- | ||
<!-- | ||
- custom css link | ||
--> | ||
<link rel="stylesheet" href="./assets/css/style.css" id="theme-style"> | ||
|
||
<!-- | ||
<!-- | ||
-dark mode css link disabled | ||
--> | ||
<!-- <link rel="stylesheet" href="./assets/css/darkmode.css" id="theme-style" > --> | ||
|
||
<!-- | ||
<!-- | ||
- preload images | ||
--> | ||
<link rel="preload" as="image" href="./assets/images/hero-banner.png"> | ||
|
@@ -49,7 +49,7 @@ | |
|
||
<body> | ||
|
||
<!-- | ||
<!-- | ||
- PRELOADER | ||
--> | ||
|
||
|
@@ -60,7 +60,7 @@ | |
|
||
|
||
|
||
<!-- | ||
<!-- | ||
- #HEADER | ||
--> | ||
<header class="header" data-header> | ||
|
@@ -119,11 +119,11 @@ | |
</li> | ||
<li class="navbar-item"> | ||
<div class="searchBox"> | ||
<input class="searchInput" id = "search-bar" type="text" name="" placeholder="Search something"> | ||
<input class="searchInput" id = "search-bar" type="text" name="" placeholder="Search courses"> | ||
<button onclick="searchCourses()" class="searchButton SearchBTN" href="#"> | ||
<div id="search-results"></div> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 29 29" fill="none"> | ||
|
||
<g clip-path="url(#clip0_2_17)"> | ||
<g filter="url(#filter0_d_2_17)"> | ||
<path | ||
|
@@ -150,7 +150,7 @@ | |
</clipPath> | ||
</defs> | ||
</svg> | ||
|
||
</button> | ||
</div> | ||
</li> | ||
|
@@ -177,7 +177,7 @@ | |
<main> | ||
<article> | ||
|
||
<!-- | ||
<!-- | ||
- #HERO | ||
--> | ||
|
||
|
@@ -258,7 +258,7 @@ <h3>Your Email</h3> | |
|
||
|
||
|
||
<!-- | ||
<!-- | ||
- #CATEGORY | ||
--> | ||
|
||
|
@@ -402,7 +402,7 @@ <h3 class="title-lg">Finances</h3> | |
|
||
|
||
|
||
<!-- | ||
<!-- | ||
- #ABOUT | ||
--> | ||
|
||
|
@@ -477,7 +477,7 @@ <h2 class="headline-md section-title"> | |
|
||
|
||
|
||
<!-- | ||
<!-- | ||
- #COURSE | ||
--> | ||
|
||
|
@@ -825,7 +825,7 @@ <h3 class="title-lg card-title"> | |
|
||
|
||
|
||
<!-- | ||
<!-- | ||
- #CTA | ||
--> | ||
|
||
|
@@ -928,7 +928,7 @@ <h2 id="Trust">Trusted by Organizations</h2> | |
</div> | ||
|
||
|
||
<!-- | ||
<!-- | ||
- #BLOG | ||
--> | ||
|
||
|
@@ -1009,7 +1009,7 @@ <h3 class="title-lg card-title"> | |
</section> | ||
|
||
|
||
<!-- | ||
<!-- | ||
- #PRICING | ||
--> | ||
|
||
|
@@ -1124,7 +1124,7 @@ <h5> Starting at $2,000.00 per month. | |
</div> | ||
</section> | ||
|
||
<!-- | ||
<!-- | ||
#Testimonials | ||
--> | ||
|
||
|
@@ -1177,23 +1177,23 @@ <h3 class="title-lg card-title">Emily Johnson</h3> | |
</div> | ||
</li> | ||
</ul> | ||
|
||
<div class="button-container"> | ||
<a href="./pages/testimonials.html" class="btn btn-primary" data-aos="zoom-in">See All Testimonials</a> | ||
</div> | ||
|
||
</div> | ||
|
||
</section> | ||
|
||
<section id="events" class="section events" aria-labelledby="events-label"> | ||
<div class="container"> | ||
<p class="title-sm text-center section-subtitle" id="events-label">Upcoming Workshops</p> | ||
|
||
<h2 class="headline-md text-center section-title" data-aos="fade-down"> | ||
Join Our Skill Development <span class="span has-after">Events</span> | ||
</h2> | ||
|
||
<div class="event-list"> | ||
<!-- Event 1 --> | ||
<div class="event-item" data-aos="fade-right"> | ||
|
@@ -1207,7 +1207,7 @@ <h3 class="event-title">Web Development Bootcamp</h3> | |
</div> | ||
<a href="#" class="event-button">View Event</a> | ||
</div> | ||
|
||
<!-- Event 2 --> | ||
<div class="event-item" data-aos="fade-right"> | ||
<div class="event-date-box"> | ||
|
@@ -1220,7 +1220,7 @@ <h3 class="event-title">Data Science Workshop</h3> | |
</div> | ||
<a href="#" class="event-button">View Event</a> | ||
</div> | ||
|
||
<!-- Event 3 --> | ||
<div class="event-item" data-aos="fade-right"> | ||
<div class="event-date-box"> | ||
|
@@ -1234,16 +1234,16 @@ <h3 class="event-title">Creative Design Thinking</h3> | |
<a href="#" class="event-button">View Event</a> | ||
</div> | ||
</div> | ||
|
||
<div class="button-container"> | ||
<a href="./pages/events.html" class="btn btn-primary see-all" data-aos="zoom-in">View All Workshops</a> | ||
</div> | ||
</div> | ||
</section> | ||
|
||
|
||
|
||
|
||
|
||
</article> | ||
</main> | ||
|
@@ -1310,7 +1310,7 @@ <h3 class="event-title">Creative Design Thinking</h3> | |
<img src="./assets/images/youtube.svg" width="40" height="40" loading="lazy" alt="Youtube"> | ||
</a> | ||
</li> | ||
|
||
|
||
</ul> | ||
|
||
|
@@ -1441,17 +1441,17 @@ <h3 class="event-title">Creative Design Thinking</h3> | |
--> | ||
|
||
<section id="contact" class="cta" aria-labelledby="cta-label"> | ||
|
||
<div class="container" style="align-items: center; | ||
justify-content: center; | ||
display: flex; | ||
flex-direction: column; | ||
gap: 10px;"> | ||
|
||
<h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style="font-size: clamp(4rem, 100px, 3vw);"> | ||
Contact Us. | ||
</h2> | ||
|
||
<form id="contact-form" data-aos="fade-left" style=" | ||
max-width: 90%; | ||
width: 400px; | ||
|
@@ -1463,7 +1463,7 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style | |
" onmouseover="this.style.boxShadow='0 10px 20px rgba(0, 0, 0, 0.2)'" | ||
onmouseout="this.style.boxShadow='0 6px 12px rgba(0, 0, 0, 0.15)'"> | ||
|
||
<input type="text" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" | ||
<input type="text" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" | ||
oninput="this.setCustomValidity('')" style=" | ||
width: 100%; | ||
padding: 12px; | ||
|
@@ -1502,9 +1502,9 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style | |
height: 150px; | ||
resize: none; | ||
transition: border-color 0.3s ease, box-shadow 0.3s ease; | ||
" onfocus="this.style.borderColor='#ff66b2'; this.style.boxShadow='0 0 10px rgba(255, 102, 178, 0.3)'" | ||
" onfocus="this.style.borderColor='#ff66b2'; this.style.boxShadow='0 0 10px rgba(255, 102, 178, 0.3)'" | ||
onblur="this.style.borderColor='#ccc'; this.style.boxShadow='none'"></textarea> | ||
|
||
<button type="submit" style=" | ||
background-color: #ff66b2; | ||
color: white; | ||
|
@@ -1542,33 +1542,55 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style | |
|
||
<!--JS for searching courses --> | ||
<script> | ||
|
||
// Define searchCourses function | ||
function searchCourses() { | ||
const searchTerm = document.getElementById('search-bar').value.toLowerCase(); | ||
const courses = document.querySelectorAll('.category-card'); | ||
const resultsDiv = document.getElementById('search-results'); | ||
resultsDiv.innerHTML = ''; // Clear previous results | ||
let found = false; // Flag to track if any course is found | ||
|
||
courses.forEach((course) => { | ||
const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase(); | ||
if (courseTitle.includes(searchTerm)) { | ||
const resultCard = course.cloneNode(true); // Clone the course card | ||
resultsDiv.appendChild(resultCard); // Show matching result at the top | ||
found = true; // Set flag to true if a course is found | ||
} | ||
}); | ||
|
||
// If no courses match, show "No results found" | ||
if (!found) { | ||
resultsDiv.innerHTML = '<p>No results found</p>'; | ||
|
||
document.addEventListener("DOMContentLoaded", () => { | ||
const searchInput = document.getElementById('search-bar'); | ||
|
||
// Add event listener for Enter key press | ||
searchInput.addEventListener('keypress', (event) => { | ||
if (event.key === 'Enter') { | ||
event.preventDefault(); // Prevent form submission if inside a form | ||
searchCourses(); // Call the search function | ||
} | ||
}); | ||
}); | ||
|
||
function searchCourses() { | ||
const searchTerm = document.getElementById('search-bar').value.toLowerCase(); | ||
const courses = document.querySelectorAll('.category-card'); | ||
const resultsDiv = document.getElementById('search-results'); | ||
resultsDiv.innerHTML = ''; // Clear previous results | ||
|
||
// Exit early if search term is empty | ||
if (!searchTerm.trim()) { | ||
resultsDiv.innerHTML = '<p class="no-results">Please enter a search term</p>'; | ||
return; | ||
} | ||
|
||
let found = false; // Flag to track if any course is found | ||
const uniqueCourses = new Set(); // Set to track unique courses | ||
|
||
courses.forEach((course) => { | ||
const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase(); | ||
if (courseTitle.includes(searchTerm)) { | ||
if (!uniqueCourses.has(courseTitle)) { | ||
uniqueCourses.add(courseTitle); // Add course title to the set | ||
const resultCard = course.cloneNode(true); // Clone the course card | ||
resultsDiv.appendChild(resultCard); // Show matching result at the top | ||
found = true; // Set flag to true if a course is found | ||
} | ||
} | ||
}); | ||
|
||
// If no courses match, show "No results found" | ||
if (!found) { | ||
resultsDiv.innerHTML = '<p class="no-results">No results found</p>'; | ||
} | ||
} | ||
|
||
</script> | ||
|
||
<!-- | ||
<!-- | ||
- custom js link | ||
--> | ||
<!-- Custom JS Links --> | ||
|
@@ -1594,7 +1616,7 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style | |
|
||
<script src="./assets/js/blogs.js"></script> | ||
|
||
<!-- | ||
<!-- | ||
- ionicon | ||
--> | ||
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> | ||
|