Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Implementing Filtering Functionality | Building the Blog Website
AI Powered Web Development Essentials

bookImplementing Filtering Functionality

Goal

Last but not least, the final step is to add functionality for filtering the articles by topic, which will be implemented using JavaScript.

Possible Prompt

Can you implement the feature of filtering articles by topic using HTML buttons and JavaScript?

Result

index.html file

  • We add a nav block to the header where our filtering buttons will be placed;
  • We provide each article with the data-category attribute and the corresponding topic value;
  • We add the link to the index.js file before the closing body tag.

index.css file
We add some styles to make the filtering buttons look pretty.

index.js file
We paste the script that implements the filtering logic.

All this ChaGPT told us to do. We followed its instructions.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Website State

Video Tutorial

Here you go. You did it. This is your complete, fully functional website. Great job!

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 6

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

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

bookImplementing Filtering Functionality

Swipe to show menu

Goal

Last but not least, the final step is to add functionality for filtering the articles by topic, which will be implemented using JavaScript.

Possible Prompt

Can you implement the feature of filtering articles by topic using HTML buttons and JavaScript?

Result

index.html file

  • We add a nav block to the header where our filtering buttons will be placed;
  • We provide each article with the data-category attribute and the corresponding topic value;
  • We add the link to the index.js file before the closing body tag.

index.css file
We add some styles to make the filtering buttons look pretty.

index.js file
We paste the script that implements the filtering logic.

All this ChaGPT told us to do. We followed its instructions.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Website State

Video Tutorial

Here you go. You did it. This is your complete, fully functional website. Great job!

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 6
some-alt