document.addEventListener("DOMContentLoaded", function () {
fetch('mods.json')
.then(response => response.json())
.then(data => {
const modContainer = document.getElementById('modContainer');
const searchInput = document.getElementById('searchInput');
// Remove existing cards
modContainer.innerHTML = '';
// Add cards from the JSON data
data.mods.forEach(mod => {
const card = document.createElement('div');
card.className = 'col-md-11 col-lg-12 col-xl-11';
card.innerHTML = `
`;
modContainer.appendChild(card);
});
// Add event listener for search input
searchInput.addEventListener('input', () => {
const searchValue = searchInput.value.toLowerCase();
// Filter mods based on search input
const filteredMods = data.mods.filter(mod =>
mod['display-name'].toLowerCase().includes(searchValue) ||
mod.description.toLowerCase().includes(searchValue) ||
mod['author-link'].toLowerCase().includes(searchValue)
);
// Update mod cards based on filtered mods
modContainer.innerHTML = '';
filteredMods.forEach(mod => {
const card = document.createElement('div');
card.className = 'col-md-11 col-lg-12 col-xl-11';
card.innerHTML = `
`;
modContainer.appendChild(card);
});
});
})
.catch(error => console.error('Error fetching mods.json:', error));
});