Bonjour à tous !
Je travaille actuellement sur le TP de la todolist en JS du tuto de Grafikart, mon code fonctionne très bien et je souhaite désormais l'optimiser avant de voir la correction histoire d'apprendre le plus possible tout seul et de compléter tout ça par la réponse finale qui est assez différente.
Ce que je veux
Je souhaiterais optimiser les parties répétitives, je vois que je peux optimiser l'event listener en mettant une variable dynamique, mais la partie du 'for of' me pose problème dans l'optimisation. je n'utilise pas de class pour l'instant dans ma structure. Quelles seraient vos solutions ? Pour l'instant je pensais regrouper les éléments répétitifs dans une seule variable dynamicFilter. Merci par avance ! :)
function dynamicFilter(remove1, remove2, add1) {
add1.classList.add('active')
remove1.classList.remove('active')
remove2.classList.remove('active')
}
function activeFilter() {
const todoClick = document.querySelector('button[data-filter="todo"]')
const allClick = document.querySelector('button[data-filter="all"]')
const doneClick = document.querySelector('button[data-filter="done"]')
//clic sur todo, desactive all et done
todoClick.addEventListener('click', (e) => {
dynamicFilter(allClick, doneClick, todoClick)
const hideAllDone = document.querySelectorAll('li .done')
for (hideDone of hideAllDone) {
hideDone.parentNode.classList.add('hidden');
}
const hideAllTodo = document.querySelectorAll('li .todo')
for (hideTodo of hideAllTodo) {
hideTodo.parentNode.classList.remove('hidden');
}
})
//clic sur done, desactive all et todo
doneClick.addEventListener('click', (e) => {
dynamicFilter(allClick, todoClick, doneClick)
const hideAllTodo = document.querySelectorAll('li .todo')
for (hideTodo of hideAllTodo) {
hideTodo.parentNode.classList.add('hidden');
}
const hideAllDone = document.querySelectorAll('li .done')
for (hideDone of hideAllDone) {
hideDone.parentNode.classList.remove('hidden');
}
})
//clic sur all, affiche tout
allClick.addEventListener('click', (e) => {
allClick.classList.add('active')
todoClick.classList.remove('active')
doneClick.classList.remove('active')
const displayAll = document.querySelectorAll('li .todo, li .done')
for (display of displayAll) {
display.parentNode.classList.remove('hidden');
}
})
}