88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
|
const seriesData = [
|
||
|
|
{
|
||
|
|
category: "Anime",
|
||
|
|
name: "Naruto",
|
||
|
|
tracks: [
|
||
|
|
"Main Theme",
|
||
|
|
"Sadness and Sorrow",
|
||
|
|
"The Raising Fighting Spirit"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Anime",
|
||
|
|
name: "Attack on Titan",
|
||
|
|
tracks: [
|
||
|
|
"Guren no Yumiya",
|
||
|
|
"Reluctant Heroes",
|
||
|
|
"Call of Silence"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Film d'animation",
|
||
|
|
name: "Your Name",
|
||
|
|
tracks: [
|
||
|
|
"Dream Lantern",
|
||
|
|
"Zenzenzense",
|
||
|
|
"Sparkle"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Jeu vidéo",
|
||
|
|
name: "Final Fantasy VII",
|
||
|
|
tracks: [
|
||
|
|
"Opening - Bombing Mission",
|
||
|
|
"Aerith's Theme",
|
||
|
|
"One-Winged Angel"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
function createSeriesList() {
|
||
|
|
const seriesList = document.getElementById('seriesList');
|
||
|
|
seriesData.forEach(serie => {
|
||
|
|
const serieElement = document.createElement('div');
|
||
|
|
serieElement.classList.add('serie');
|
||
|
|
serieElement.innerHTML = `
|
||
|
|
<div class="serie-header">
|
||
|
|
<span class="category">${serie.category}</span>
|
||
|
|
<span class="name">${serie.name}</span>
|
||
|
|
</div>
|
||
|
|
<div class="tracks">
|
||
|
|
<ul>
|
||
|
|
${serie.tracks.map(track => `<li>${track}</li>`).join('')}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
seriesList.appendChild(serieElement);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function addEventListeners() {
|
||
|
|
const serieHeaders = document.querySelectorAll('.serie-header');
|
||
|
|
serieHeaders.forEach(header => {
|
||
|
|
header.addEventListener('click', () => {
|
||
|
|
const tracks = header.nextElementSibling;
|
||
|
|
tracks.classList.toggle('show');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
const searchInput = document.getElementById('searchInput');
|
||
|
|
searchInput.addEventListener('input', filterSeries);
|
||
|
|
}
|
||
|
|
|
||
|
|
function filterSeries() {
|
||
|
|
const searchValue = document.getElementById('searchInput').value.toLowerCase();
|
||
|
|
const series = document.querySelectorAll('.serie');
|
||
|
|
|
||
|
|
series.forEach(serie => {
|
||
|
|
const name = serie.querySelector('.name').textContent.toLowerCase();
|
||
|
|
const tracks = Array.from(serie.querySelectorAll('.tracks li')).map(li => li.textContent.toLowerCase());
|
||
|
|
const isVisible = name.includes(searchValue) || tracks.some(track => track.includes(searchValue));
|
||
|
|
serie.style.display = isVisible ? 'block' : 'none';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
createSeriesList();
|
||
|
|
addEventListeners();
|
||
|
|
});
|