Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Funcionalidade de Filtragem | Construindo o Site do Blog
Essenciais de Desenvolvimento Web com IA

bookFuncionalidade de Filtragem

Objetivo

Por último, mas não menos importante, o passo final é adicionar a funcionalidade para filtrar os artigos por tópico, que será implementada usando JavaScript.

Possível Solicitação

Você pode implementar o recurso de filtrar artigos por tópico usando botões HTML e JavaScript?

Resultado

Arquivo index.html

  • Adicionamos um bloco nav ao header onde nossos botões de filtragem serão colocados;
  • Atribuímos a cada artigo o atributo data-category e o valor correspondente ao tópico;
  • Adicionamos o link para o arquivo index.js antes da tag de fechamento body.

Arquivo index.css
Adicionamos alguns estilos para que os botões de filtragem fiquem bonitos.

Arquivo index.js
Colamos o script que implementa a lógica de filtragem.

Tudo isso o ChaGPT nos disse para fazer. Seguimos suas instruções.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Estado do Site

Tutorial em Vídeo

Aqui está. Você conseguiu. Este é o seu site completo e totalmente funcional. Ótimo trabalho!

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 5

bookFuncionalidade de Filtragem

Deslize para mostrar o menu

Objetivo

Por último, mas não menos importante, o passo final é adicionar a funcionalidade para filtrar os artigos por tópico, que será implementada usando JavaScript.

Possível Solicitação

Você pode implementar o recurso de filtrar artigos por tópico usando botões HTML e JavaScript?

Resultado

Arquivo index.html

  • Adicionamos um bloco nav ao header onde nossos botões de filtragem serão colocados;
  • Atribuímos a cada artigo o atributo data-category e o valor correspondente ao tópico;
  • Adicionamos o link para o arquivo index.js antes da tag de fechamento body.

Arquivo index.css
Adicionamos alguns estilos para que os botões de filtragem fiquem bonitos.

Arquivo index.js
Colamos o script que implementa a lógica de filtragem.

Tudo isso o ChaGPT nos disse para fazer. Seguimos suas instruções.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Estado do Site

Tutorial em Vídeo

Aqui está. Você conseguiu. Este é o seu site completo e totalmente funcional. Ótimo trabalho!

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6
some-alt