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 theheader
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 closingbody
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.css
index.js
Code Description
index.html
Lines 12-16:<nav>
: Contains three buttons for filtering articles by category.-
onclick="filterArticles('category')"
: Each button calls thefilterArticles
function with the respective category as a parameter when clicked.
<article>
has a
data-category
attribute indicating its category. index.css
Lines 26-44:- Centers the navigation buttons and adds spacing.
- Styles buttons with background color, padding, margin, cursor pointer, and hover effect.
index.js
Lines 1, 11:filterArticles(category){ }
: Function to filter articles based
on the category. Line 2: Selects all articles in the main section.
Lines 4-10: Iterates over each article.
- Line 5: Checks if the article matches the selected category or if "all" is selected.
- Line 6: Displays matching articles.
- Line 8: Hides non-matching articles.
Website State
Video Tutorial
Here you go. You did it. This is your complete, fully functional website. Great job!
Everything was clear?
Course Content
AI Powered Coding
1. Foundation of Web Technology
AI Powered Coding
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 theheader
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 closingbody
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.css
index.js
Code Description
index.html
Lines 12-16:<nav>
: Contains three buttons for filtering articles by category.-
onclick="filterArticles('category')"
: Each button calls thefilterArticles
function with the respective category as a parameter when clicked.
<article>
has a
data-category
attribute indicating its category. index.css
Lines 26-44:- Centers the navigation buttons and adds spacing.
- Styles buttons with background color, padding, margin, cursor pointer, and hover effect.
index.js
Lines 1, 11:filterArticles(category){ }
: Function to filter articles based
on the category. Line 2: Selects all articles in the main section.
Lines 4-10: Iterates over each article.
- Line 5: Checks if the article matches the selected category or if "all" is selected.
- Line 6: Displays matching articles.
- Line 8: Hides non-matching articles.
Website State
Video Tutorial
Here you go. You did it. This is your complete, fully functional website. Great job!
Everything was clear?