हेल्लो दोस्तों,आज हम आपके लिए लेकर आये है HTML CSS एवं Java Script Code से बने Project Filter Box जिसके माध्यम से आप कई चीजो के नाम लिख सकते है तथा लिखे गए नाम को आप Categories के हिसाब से बटन के रूप में बाट सकते है जिससे आप जिस बटन या Categories पर Click करेंगे तो उससे सम्बंधित लिखे गए नाम आपके सामने प्रदर्शित होने लगेंगे यदि आप भी इस तरह के Project को बनाना सीखना चाहते है तो आप नीचे दिए पोस्ट में Filter Box Project के Source Code के माध्यम से सीख सकते है
Filter Box Project Demo
आप नीचे दिए पोस्ट में Filter Box Project का Demo देख सकते है
Filter Box CSS Code
नीचे दिए गए CSS Code के माध्यम से Filter Box को अपने अनुसार Customize कर सकते है
/* Filter Box को Customize करे */
.filterbox {
float: left;
background-color: #ffc107;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
/* Filter Box में लिखे गए शब्द को Hide करे*/
.show {
display: block;
}
/* Container को Customize करे */
.container {
margin-top: 20px;
overflow: hidden;
}
/* Filter Box के Buttons को Customize करे */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #fd7e14;
cursor: pointer;
}
/* Filter Box के Buttons के hover के Color को Change करे*/
.btn:hover {
background-color: #e83e8cbd;
}
/* Filter Box के Active Buttons के Color को Change करे*/
.btn.active {
background-color: #dc3545;
color: white;
}
उपरोक्त दिए गए Indicate में Filter Box के CSS Code को आप अपने अनुसार किसी भी तरह का संशोधन कर सकते है
Filter Box HTML Code
नीचे दिए गए HTML Code में आप filterSelection में ('name') की जगह पर अपने Categories का नाम लिखे फिर उसके बाद बटन पर Show हो रहे Name को Change करने के लिए इस वाले >Name< शब्द को change करे ये हमारा हो गया बटन पर दिखने वाले नाम तथा filterSelection के Categories का नाम बदलने के लिए। अब आप नीचे दिए गए element में उपरोक्त बताये गए तरीके से बदलाव कर सकते है।
<div id="box">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('name')">Name</button>
<button class="btn" onclick="filterSelection('electronics')"> Electronics</button>
<button class="btn" onclick="filterSelection('country')"> Country</button>
<button class="btn" onclick="filterSelection('district')"> District</button>
</div>
अब नीचे कुछ और HTML Code दिए जा रहे है जिसमें आपको filterbox के बाद Categories का नाम लिखना है फिर उसके बाद उसी Categories से सम्बंधित शब्द को लिखना है
<div class="results">
<div class="filterbox name">Pawan</div>
<div class="filterbox district">Gonda</div>
<div class="filterbox name">Sachin</div>
<div class="filterbox district">Ayodhya</div>
<div class="filterbox name">Sandeep</div>
<div class="filterbox district">Amethi</div>
<div class="filterbox electronics">Computer</div>
<div class="filterbox electronics">Keyboard</div>
<div class="filterbox country">India</div>
<div class="filterbox electronics">Mouse</div>
<div class="filterbox country">England</div>
<div class="filterbox country">America</div>
<div class="filterbox electronics">Printers</div>
</div>
अब हमारा HTML Code तैयार हो चूका है है
Filter Box Java Code
उपरोक्त बताये गए HTML Code एवं CSS Code को लिखने के बाद आपको नीचे दिए गए Java Code को लिखना है
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterbox");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Active button को highlight करे //
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
अब हमारा Filter Box Project पूरी तरह से तैयार हो चूका है आप नीचे दिए गए Copy Code बटन पर Click करके Filter Box Project के Source Code को Copy कर सकते है