We can achieve simple things like search products and filter them using simple vanilla javascript. jQuery, Ajax might make things simple, the same time it makes the app bulky. I have used only 40 lines of js code to achieve this.
I think nowadays rather than depending on libraries we should focus more on how to accomplish our task using vanilla javascript as much as we can.
Try this small project on - https://lnkd.in/diS5S2T
Code-
javaScript
//Defining Ui
const filter = document.querySelector('.searchBar');
const fruitList = document.querySelector('.collection');
//Load Event Listners
loadEventListners();
//Load all event listners function
function loadEventListners(){
//filter fruit
filter.addEventListener('keyup', filterFruit);
//search Bar cross malfunction
filter.addEventListener("search", closeSearch);
}
//filter function
function filterFruit(e){
//Accessing input data from input field
const text = e.target.value.toLowerCase();
document.querySelectorAll('.collection-item').forEach
(function (fruit){
const item = fruit.textContent;
if(item.toLowerCase().indexOf(text) != -1){
fruit.style.display = 'block';
}else{
fruit.style.display = 'none';
noResult.style.display ='block';
}
});
}
//Search cross malfunction closeSearch
function closeSearch(e){
document.location.reload();
}
//just for fun
const heading = document.querySelector('#heading');
heading.style.cssText= "font-family: 'Langar', cursive;";
Html
<!-- boiler template -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Search</title>
<link rel="stylesheet" href="style.css">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<!-- fontawesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- heading -->
<h1 id="heading">Fruit Search</h1>
<!-- Search Bar -->
<input type="search" class="searchBar" name="Search" results="5" placeholder="Search">
<!-- Product Template -->
<div>
<ul class="collection">
<!-- apple -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Apple">
<img src="https://isurojit.github.io/fruitsearch/img/apple.png" alt="apple">
</a>
<h1>Apple</h1>
</li>
<!-- orange -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Orange_(fruit)">
<img src="https://isurojit.github.io/fruitsearch/img/orange.jpg" alt="orange">
</a>
<h1>Orange</h1>
</li>
<!-- mango -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Mango">
<img src="https://isurojit.github.io/fruitsearch/img/mango.jpeg" alt="mango">
</a>
<h1>Mango</h1>
</li>
<!-- banana -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Banana">
<img src="https://isurojit.github.io/fruitsearch/img/banana.jpg" alt="banana">
</a>
<h1>Banana</h1>
</li>
<!-- pomegranate -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Pomegranate">
<img src="https://isurojit.github.io/fruitsearch/img/pomegranate.png" alt="pomegranate">
</a>
<h1>Pomegranate</h1>
</li>
<!-- pitaya -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Pitaya">
<img src="https://isurojit.github.io/fruitsearch/img/dragonfruit.jpg" alt="pitaya">
</a>
<h1>Pitaya</h1>
</li>
<!-- kiwi -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Kiwifruit">
<img src="https://isurojit.github.io/fruitsearch/img/kiwi.png" alt="kiwi">
</a>
<h1>Kiwi</h1>
</li>
<!-- papaya -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Papaya">
<img src="https://isurojit.github.io/fruitsearch/img/papaya.jpg" alt="papaya">
</a>
<h1>Papaya</h1>
</li>
<!-- strawberry -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Strawberry">
<img src="https://isurojit.github.io/fruitsearch/img/strawberry.jpg" alt="strawberry">
</a>
<h1>Strawberry</h1>
</li>
<!-- watermelon -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Watermelon">
<img src="https://isurojit.github.io/fruitsearch/img/watermellon.jpg" alt="watermellon">
</a>
<h1>Watermelon</h1>
</li>
<!-- pear -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Pear">
<img src="https://isurojit.github.io/fruitsearch/img/pears.png" alt="pear">
</a>
<h1>Pear</h1>
</li>
<!-- cherry -->
<li class="collection-item">
<a href="https://en.wikipedia.org/wiki/Cherry">
<img src="https://isurojit.github.io/fruitsearch/img/cherry.jpg" alt="cherry">
</a>
<h1>Cherry</h1>
</li>
<!-- end of products -->
</ul>
<!-- end of list -->
</div>
<!-- end of product template -->
<footer>
<h4>Made With <i class="fas fa-heart"></i> by <a href="https://www.linkedin.com/in/surojit-manna">isuro</a></h4>
</footer>
<script src="app.js"></script>
</body>
</html>
Css
body{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.collection-item:hover{
transform: scale(.9);
transition: all .5s ease-in-out;
cursor: pointer;
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
img{
width: 90%;
}
.collection{
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
.collection-item{
list-style: none;
flex: 0 0 24.3333%;
border: 1px solid #fff1f0;
-webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
border-radius: 15%;
padding: 2%;
margin: 2% 2%;
}
h1{
text-align: center;
}
input{
width: 75%;
border: 1px solid #fff1f0;
-webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
border-radius: 40px;
padding: 1.5%;
outline:none;
margin: 1% 12%;
font-size: 3rem;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.collection-item{
list-style: none;
flex: 0 0 95%;
}
img{
width: 100%;
}
input{
width: 75%;
border: 1px solid #fff1f0;
-webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
border-radius: 40px;
padding: 1.5%;
outline:none;
margin: 2% 10%;
font-size: 3rem;
}
h1{
text-align: center;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 900px) and (min-width: 600px){
.collection-item{
list-style: none;
flex: 0 0 45%;
}
img{
width: 100%;
}
input{
width: 75%;
border: 1px solid #fff1f0;
-webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
border-radius: 40px;
padding: 1.5%;
outline:none;
margin: 2% 10%;
font-size: 3rem;
}
h1{
text-align: center;
}
}
/* Scroll bar */
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgb(255, 0, 0);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(38, 0, 255);
border-radius: 50px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
cursor: pointer;
background: rgb(0, 255, 42);
}
footer{
text-align: center;
}
[ps:- didn't work on CSS. so kept it messy.]
Any suggestions welcome.
Top comments (2)
Would be nice if you posted the code here. Keep everything in one place.
Sure. :)