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

bookImplementação da Funcionalidade de Filtragem

Objetivo

Por fim, o último passo é adicionar a funcionalidade de filtragem dos artigos por tópico, que será implementada utilizando JavaScript.

Possível Prompt

É possível implementar o recurso de filtragem de artigos por tópico utilizando botões HTML e JavaScript?

Resultado

Arquivo index.html

  • Inclusão de um bloco nav no header para posicionamento dos botões de filtragem;
  • Atribuição do atributo data-category a cada artigo, com o valor correspondente ao tópico;
  • Inclusão do link para o arquivo index.js antes da tag de fechamento do body.

Arquivo index.css
Adição de estilos para aprimorar a aparência dos botões de filtragem.

Arquivo index.js
Inserção do script responsável pela lógica de filtragem.

Todas essas etapas foram orientadas pelo ChatGPT. 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. Excelente 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

Suggested prompts:

Can you explain how the filtering functionality works in more detail?

What should I do if the filter buttons are not working as expected?

Can I add more categories or customize the filter buttons?

Awesome!

Completion rate improved to 5

bookImplementação da Funcionalidade de Filtragem

Deslize para mostrar o menu

Objetivo

Por fim, o último passo é adicionar a funcionalidade de filtragem dos artigos por tópico, que será implementada utilizando JavaScript.

Possível Prompt

É possível implementar o recurso de filtragem de artigos por tópico utilizando botões HTML e JavaScript?

Resultado

Arquivo index.html

  • Inclusão de um bloco nav no header para posicionamento dos botões de filtragem;
  • Atribuição do atributo data-category a cada artigo, com o valor correspondente ao tópico;
  • Inclusão do link para o arquivo index.js antes da tag de fechamento do body.

Arquivo index.css
Adição de estilos para aprimorar a aparência dos botões de filtragem.

Arquivo index.js
Inserção do script responsável pela lógica de filtragem.

Todas essas etapas foram orientadas pelo ChatGPT. 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. Excelente trabalho!

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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