Introduction
हेलो दोस्तों आज हम इस post में javascript का estemal करके HTML card को filter कैसे कर सकते है!. वह हम detail से HTML, javascript के code के साथ समजेंगे!.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter Card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
/* Add your styles for the filter card here */
.filter-card {
width: 100%;
border: 1px solid #ccc;
margin: 20px 0px 20px 0px;
text-align: center;
}
.filter-btn {
margin-right: 5px;
border: unset;
}
.filter-card div {
padding-bottom: 15px;
}
.filter-btn.active{border: 1px solid #0f0e0e;}
.hide{
display: none;
}
.item.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="filter-card">
<h2>Filter Card</h2>
<div>
<button class="filter-btn active" data-item_value="all">All Cards</button>
<button class="filter-btn" data-item_value="yellow-card">Yellow card</button>
<button class="filter-btn" data-item_value="blue-card">Blue card</button>
<button class="filter-btn" data-item_value="white-card">White card</button>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional
content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card ">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card ">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
<style>
.filter-card {
width: 100%;
border: 1px solid #ccc;
margin: 20px 0px 20px 0px;
text-align: center;
}
.filter-btn {
margin-right: 5px;
border: unset;
}
.filter-card div {
padding-bottom: 15px;
}
.filter-btn.active{border: 1px solid #0f0e0e;}
.hide{
display: none;
}
.item.active {
display: block;
}
</style>
Javascript code
<script>
document.addEventListener("DOMContentLoaded", function() {
const filteItems = document.querySelectorAll(".filter-btn");
filteItems.forEach(button =>{
button.addEventListener('click', function() {
filteItems.forEach(btn => {
btn.classList.remove('active');
});
this.classList.add("active")
const category = this.getAttribute('data-item_value');
filterItems(category);
});
})
function filterItems(category) {
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.classList.remove('active');
item.classList.add('hide');
if (category === 'all' || item.classList.contains(category)) {
item.classList.add('active');
item.classList.remove('hide');
}
});
}
})
</script>
ऊपर के javascript के example में देख सकते है की “DOMContentLoaded” होने के बाद में सभी filter-btn button की loop में button पर click event चलायी और current click हुवे button से filter category value निकली और HTML card को filter कराया है!।
Full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter Card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
/* Add your styles for the filter card here */
.filter-card {
width: 100%;
border: 1px solid #ccc;
margin: 20px 0px 20px 0px;
text-align: center;
}
.filter-btn {
margin-right: 5px;
border: unset;
}
.filter-card div {
padding-bottom: 15px;
}
.filter-btn.active{border: 1px solid #0f0e0e;}
.hide{
display: none;
}
.item.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="filter-card">
<h2>Filter Card</h2>
<div>
<button class="filter-btn active" data-item_value="all">All Cards</button>
<button class="filter-btn" data-item_value="yellow-card">Yellow card</button>
<button class="filter-btn" data-item_value="blue-card">Blue card</button>
<button class="filter-btn" data-item_value="white-card">White card</button>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional
content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card ">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue Card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item yellow-card">
<div class="card">
<img src="avtar-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yellow card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item white-card">
<div class="card ">
<img src="avtar-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">White card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-lg-3 item blue-card">
<div class="card">
<img src="avtar-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Blue card title</h5>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const filteItems = document.querySelectorAll(".filter-btn");
filteItems.forEach(button =>{
button.addEventListener('click', function() {
filteItems.forEach(btn => {
btn.classList.remove('active');
});
this.classList.add("active")
const category = this.getAttribute('data-item_value');
filterItems(category);
});
})
function filterItems(category) {
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.classList.remove('active');
item.classList.add('hide');
if (category === 'all' || item.classList.contains(category)) {
item.classList.add('active');
item.classList.remove('hide');
}
});
}
})
</script>
</body>
</html>
Javascript का इस्तेमाल करके हमने HTML card को simply filter करा है! जिसके लिए हमने filters Button setup किये है जैसे की yellow card , Blue card , white card अगर हम yellow card पे click करते है तो सभी yellow card दिखेंगे और वैसे ही blue card पे click करेंगे तो सभी Blue card दिखेंगी!
