Visualização do Projeto: https://image-gallery-filter-vanilla-js.netlify.app/

Sobre o projeto

O intuito deste projeto foi criar um filtro de galeria de e-commerce em que cada seção contivesse os produtos de seu respectivo setor. As ferramentas utilizadas foram: html5, css3 e javascript (puro). Se tratando da solução em javascript, utilizei maioritariamente o DOM (Document Object Model) para realizar as interações com o html e css, sobretudo, utilizando o querySelector(). Com o manuseio do querySelector() foi possível "pegar" os seletores de estilo css e atribuí-los a comandos de interatividade com o javascript. Como pode ser visualizado no código abaixo:

filterContainer.querySelector(".active").classList.remove("active");

Além disso, foi utilizado o método forEach() para percorrer o array e passar uma função de callback para cada elemento da mesma, juntamente ao valor atual (item), e logo em seguida, passada uma estrutura condicional if/else.