Skip to content

Commit

Permalink
Merge pull request #718 from Irtesaam/fix-searchbar
Browse files Browse the repository at this point in the history
Fixes #717 : searchbar now shows result when enter key is pressed
  • Loading branch information
anuragverma108 authored Oct 19, 2024
2 parents 5f41c69 + a861e3b commit c5e7340
Showing 1 changed file with 83 additions and 61 deletions.
144 changes: 83 additions & 61 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -49,7 +49,7 @@

<body>

<!--
<!--
- PRELOADER
-->

Expand All @@ -60,7 +60,7 @@



<!--
<!--
- #HEADER
-->
<header class="header" data-header>
Expand Down Expand Up @@ -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
Expand All @@ -150,7 +150,7 @@
</clipPath>
</defs>
</svg>

</button>
</div>
</li>
Expand All @@ -177,7 +177,7 @@
<main>
<article>

<!--
<!--
- #HERO
-->

Expand Down Expand Up @@ -258,7 +258,7 @@ <h3>Your Email</h3>



<!--
<!--
- #CATEGORY
-->

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



<!--
<!--
- #ABOUT
-->

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



<!--
<!--
- #COURSE
-->

Expand Down Expand Up @@ -825,7 +825,7 @@ <h3 class="title-lg card-title">



<!--
<!--
- #CTA
-->

Expand Down Expand Up @@ -928,7 +928,7 @@ <h2 id="Trust">Trusted by Organizations</h2>
</div>


<!--
<!--
- #BLOG
-->

Expand Down Expand Up @@ -1009,7 +1009,7 @@ <h3 class="title-lg card-title">
</section>


<!--
<!--
- #PRICING
-->

Expand Down Expand Up @@ -1124,7 +1124,7 @@ <h5> Starting at $2,000.00 per month.
</div>
</section>

<!--
<!--
#Testimonials
-->

Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 -->
Expand All @@ -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>
Expand Down

0 comments on commit c5e7340

Please sign in to comment.