System-End/YSWS-Catalog
1
0
Fork 0
mirror of https://github.com/System-End/YSWS-Catalog.git synced 2026-04-19 19:55:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add search functionality

Browse source
This commit is contained in:
PawiX25 2024-12-10 17:49:01 +01:00
parent d715d5f704
commit 2f7cf20f1b
3 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -14,6 +14,11 @@
<h1 class="ultratitle">YSWS Programs</h1>
<p class="lead">A comprehensive list of Hack Club's "You Ship, We Ship" programs.</p>
<p class="caption">Want to update or add something? Submit a PR on <a href="https://github.com/PawiX25/YSWS-Catalog" target="_blank">GitHub</a>!</p>
<div class="search-container">
<input type="search" id="program-search" placeholder="Search programs..." class="search-input">
</div>
<p class="active-count">Currently <span id="active-count">0</span> active programs</p>
<div class="filter-container">

28
script.js
View file

@ -371,12 +371,40 @@ function initializeTheme() {
}
}
function searchPrograms(searchTerm) {
const programCards = document.querySelectorAll('.program-card');
searchTerm = searchTerm.toLowerCase().trim();
programCards.forEach(card => {
const name = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
const slackChannel = card.querySelector('.program-links')?.textContent.toLowerCase() || '';
const matches = name.includes(searchTerm) ||
description.includes(searchTerm) ||
slackChannel.includes(searchTerm);
card.classList.toggle('hidden-by-search', !matches);
});
const sections = document.querySelectorAll('.category-section');
sections.forEach(section => {
const hasVisiblePrograms = Array.from(section.querySelectorAll('.program-card'))
.some(card => !card.classList.contains('hidden-by-search'));
section.classList.toggle('hidden', !hasVisiblePrograms);
});
}
document.addEventListener('DOMContentLoaded', () => {
renderPrograms();
const searchInput = document.getElementById('program-search');
searchInput.addEventListener('input', (e) => searchPrograms(e.target.value));
document.querySelectorAll('.filter-btn').forEach(button => {
button.addEventListener('click', () => {
filterPrograms(button.dataset.category);
searchPrograms(searchInput.value);
});
});

26
styles.css
View file

@ -638,6 +638,32 @@ td {
margin-bottom: var(--spacing-3);
}
.search-container {
margin: var(--spacing-3) 0;
width: 100%;
}
.search-input {
width: 100%;
max-width: 600px;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-2);
border: 2px solid var(--border);
border-radius: var(--radii-default);
background: var(--elevated);
color: var(--text);
transition: border-color 0.2s ease;
}
.search-input:focus {
outline: none;
border-color: var(--primary);
}
.program-card.hidden-by-search {
display: none;
}
@media screen and (min-width: 32em) {
.ultratitle {
font-size: var(--font-5);