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 passo final é adicionar a funcionalidade de filtragem dos artigos por tópico, que será implementada utilizando JavaScript.

Prompt Possível

É 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 body.

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

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

Todas essas etapas foram orientadas pelo ChatGPT. As instruções foram seguidas conforme indicado.

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

Awesome!

Completion rate improved to 5

bookImplementação da Funcionalidade de Filtragem

Deslize para mostrar o menu

Objetivo

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

Prompt Possível

É 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 body.

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

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

Todas essas etapas foram orientadas pelo ChatGPT. As instruções foram seguidas conforme indicado.

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