A idéia desse projeto surgiu de um colega que me pediu um auxilio em como tratar a filtragem de conteúdos pelo front-end.
Como o nome do projeto diz, se trata de uma seleção de uma ou mais opções mostrando o conteúdo conforme a seleção, sendo o tratamento feito pelo front-end usando JavaScript.
Resumindo foi feito uma definição dos filtros e dos conteúdos usando data attributes para identificar a qual tipo cada um se relacionava, assim o conteúdo mostrado seria relacionado ao filtro selecionado e também para evitar o uso de muitas classes ou até mesmo para que não ocorra o risco de termos uma classe com mesmo nome em outra parte do projeto.
Como pode-se selecionar um filtro e também desmarcar o mesmo, o tratamento foi feito que mostrará todos os conteúdos caso nenhum filtro seja selecionado e marcando o filtro "Todos" para deixar em destaque. Os filtros marcados ficam selecionados com outra cor para dar destaque. E claro que pode ser mostrado um, dois ou quantas opções estiverem disponíveis.
Claro que isso foi feito com uma abordagem estática, mas que pode ser facilmente adaptada para uma versão dinâmica.
Caso vocês queira ver esse projeto funcionando sem precisar baixar o projeto e rodar em sua máquina, basta clicar no link abaixo. https://taissonso.github.io/multiple-filters/
Se tiver alguma dúvida, sugestão ou critíca construtiva, por favor entre em contado, é sempre bom trocar idéias e conhecimento com o próximo. Obrigado!
☕ 💾 💻 🎉 🎮