Para começar, faça clone deste repositório.
O objetivo desta entrega é utilizar a manipulação de DOM para montar uma lista de produtos com alguns filtros (como busca, filtro por seção "Hortifruti") e, por fim, mostrar todos os produtos.
No projeto clonado você terá 3 arquivos, index.html, style.css e script.js.
Não se preocupe com a parte de estilização, as classes já estão criadas, porém, sinta-se livre para alterar caso ache necessário.
O foco principal da entrega será trabalhar com objetos, manipulação do DOM, uso de métodos de array e string.
Aviso!
Ao clonar o projeto, você verá dois arquivos JavaScript, sendo um deles para armazenar exclusivamente os dados que você irá utilizar e o segundo onde irá ser inserido sua lógica, lembre-se que a organização do seu projeto é tão importante quanto seu código. Nem sempre será só você que irá utilizar o projeto
- Construindo a Lista de Produtos
- Adicionando os Filtros
- Calculando o Preço Total
A primeira coisa que precisamos fazer é construir a lista dos produtos na nossa página. Note que, no arquivo index.html do repositório clonado, já temos um modelo HTML para utilizarmos como base para criarmos os produtos de forma dinâmica, ou seja, através do DOM.
Lembre de não estilizar via Javascript! Sempre crie classes com o estilo que você espera para o elemento e adicione essa classe ao elemento pelo Javascript.
Podemos observar, no GIF de exemplo acima, que temos três formas de filtrar nossos produtos. São elas:
- Mostrar Hortifruti: Mostra a listagem apenas dos produtos que são da seção "Hortifruti";
- Campo de busca: Filtra a listagem de produtos pelo nome do produto, inserido no campo;
- Mostrar todos: Mostra a listagem de todos os produtos.
Por fim mas não menos importante, o cálculo do preço total. Note que o cálculo, assim como a listagem, é dinâmico. Ou seja, seu valor muda de acordo com o valor dos produtos que estão sendo mostrados
- Calcular dinamicamente o valor total dos produtos listados.
Dica!
Lembre-se que, como visto antes, quando trabalhamos com arrays e objetos, temos muitas possibilidades de métodos para nos auxiliar a deixar nosso código mais enxuto e de fácil leitura. Escolha o mais adequado para as situações propostas.
Agora que você já fez os pontos principais da entrega, sinta-se à vontade para criar mais tipos de filtros e deixar sua entrega ainda mais dinâmica.